Cómo crear un menú desplegable con CSS3

menú desplegable

Este post viene producido una vez más por el compi Dany. El hombre, que se está convirtiendo en todo un artista de CSS y sus cosas, nos proporciona esta vez un ejercicio muy chulo sobre cómo crear un menú desplegable utilizando CSS3 (y un par de funciones JavaScript para cambiar el estado de visualización de la explicaciones que acompañan al ejercicio). El código que nos proporciona el colega es sencillo de entender y utiliza HTML5 para montar los CSS que nos mostará el menú.

Cuando se despliega el menú, que en este caso tiene tres niveles, si haces click en alguno de ellos, se mostrará en la parte de abajo una breve explicación de como se hizo cada uno de los niveles del menú. Por sacarle un pero al ejercicio, diré que lo único que le falla es que si pinchas primero en el apartado 3 del menú, se van a mostrar las explicaciones de los apartados anteriores junto con la explicación referente al apartado tres. Pero esto será fácilmente subsanable añadiendo un poco de código en las funciones Javascript que controlan la visibilidad de los campos de explicación. Se puede ver un ejemplo práctico del menú desplegable en este link.



Esperando una nueva colaboración de Dany, aquí dejo el código fuente de los dos archivos que utiliza (un index.html y un estilos.css) y que ha generado el. Dentro del código se puede leer alguna explicación que nos ha ido dejando mientras picaba el código.

Código del menú desplegable realizado con CSS3;

 index.html

estilos.css

Deja un comentario