En una publicación pasada habíamos visto la construcción de un menú desplegable 100% en CSS que por otra parte utilizaba las bondades de CSS3 para establecer un diseño más detallado que incluía el uso de esquinas redondeadas, degradados, sombras y más.

En esta oportunidad y gracias a la colaboración de Agustín Vignoli le agregamos la posibilidad de que los ítems puedan desplegarse de forma animada.

Menú desplegable CSS3 fue la publicación en donde aprendimos a construir este menu, ahora sólo vamos a explicar como le agregamos animación.

Este menu no utiliza javascript para animarse, simplemente agregaremos las siguientes propiedades CSS las cuales explicaremos línea por línea.

La propiedad utilizada para animar es transition en sus diferentes modalidades con el objetivo de ser admitida por todos los navegadores.

Veamos los distintos valores de la propiedad transition

all: se aplica a todos los elementos seleccionados.
0.5s: el la duración en segundos de la animación.
ease: tipo de animación.

Si tienen ganas de aprender más acerca de las distintas transiciones de CSS, pueden ampliar el conocimiento en su sección de la W3C.

dd li {
   display: block; 
   height: 0; /* Esta será la altura inicial de cada uno de los subitems */
   overflow: hidden; /* Oculto el contenido que queda por fuera de los li, ya que tienen 0 de alutra */
   -webkit-transition: all 0.5s ease; /* Chrome y Safari */
   -moz-transition: all 0.5s ease; /* Mozila */
   -ms-transition: all 0.5s ease; /* Algunas versiones de IE */
   -o-transition: all 0.5s ease; /* Opera */
   transition: all 0.5s ease;
   behavior: url(pie.htc); /* HTC es un formato de archivo creado por Microsoft del tipo XML que almacena distintos comportamientos para su correcto funcionamiento en algunas versiones de Internet Explorer */
}
dd:hover li { 
   height: 37px; /* Esta será la altura final de cada uno de los subitems */
}

Descargar archivos

Categoría: Web

Publicado por: negro

Entradas más populares

Una respuesta para “Menú CSS3 desplegable y animado”

  • Buen dia!!
    ando ocupando este menu desplegable para la creacion de una bitacora personal, te agradesco mucho por el trabajo que has hecho, solo una duda:
    ¿Porque la animacion de desplegado no ocurre cuando se le pone altura de los subitems en automatico?

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>