FadeIn/Out en menú con CSS

8/oct/2012 0

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.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab