FadeIn/Out en menú con CSS

8/Oct/2012 208

Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6.

Primero, el ejemplo del nunca mal ponderado menú horizontal con listas:

Ver ejemplo 1

Ahora, el efecto aplicado. Básicamente se agregan 2 instancias diferentes el cambio de opacidad, primero en el :hover de #menu, los links tendrán opacidad 0.5 y al :hover al elemento mismo opacidad 1, todo graciosamente animado mediante transition de CSS3:

#menu a {
  transition: 0.3s opacity ease-in-out;
}
  #menu:hover a {
    opacity: 0.5;
  }
  #menu a:hover {
    opacity: 1;
  }

Ver ejemplo 2

* El diseño del menú en sí y de cada botón es parte de su propio talento.

Comentarios

  1. stromectolforte.com [#]

    ivermectin 6mg dosage http://stromectolforte.com/# ivermectin 3 mg ivermectin til salg

  2. ivermectin tablets for humans [#]

    ivermectin tablets for sale http://stromectolforte.com/# ivermectin tablets dosage ivermectin

  3. ivermectin side effects [#]

    ivermectin 3mg

    yourself ellagic acid nearly

  4. stromectol 3 mg tablets price [#]

    ivermectin tablets for humans http://stromectolforte.com/# stromectol 3mg tablets price cairan stromektol

  5. stromectolforte.com [#]

    ivermectin for humans amazon https://stromectolforte.com/ ivermectin eye drops ivermectin for humans

  6. more info [#]

    Having read this I believed it was very enlightening.
    I appreciate you finding the time and energy to put this information together.

    I once again find myself spending a
    significant amount of time both reading and commenting.

    But so what, it was still worth it!

  7. where can i buy stromectol 6mg [#]

    will stromectol

    impose esophageal manometry sacred

  8. stromectol trihydrate 6 mg [#]

    purchase ivermectin online

    disorder vaccination adopt

CSSLab