Botonera con submenus

Vamos a ver como crear una botonera (o navigation bar) cuyos submenús aparecerán al pasar por encima de los enlaces.

Puedes ver la botonera del ejemplo funcionando en este enlace.

Puedes ver como hacer una botonera con HTML en 15 cómodos pasos en mi curso de HTML. Este videotutorial sirve de soporte a esa documentación y explica pasito a pasito como hacer esta botonera con submenús animados.

Cómo hacer la botonera con submenús

Esta botonera está resuelta de forma similar a como funcionan las botoneras en wordpress. Una botonera (o navbar) es una lista de enlaces.

Para que los ‘li’ de la botonera se coloquen horizontalmente (queremos una botonera horizontal), indicaremos que los li dentro del menú tengan el estilo display:inline-block

Nosotros identificaremos al li que tiene submenús asignándole un class. Dentro de ese li, además de haber un enlace, debería haber otro ul o submenú.

Para que ese submenú no desplace al resto de los elementos de la botonera, le pondremos position:absolute. Además, como el submenú debe mostrarse en vertical, le asignaremos a los li que tiene dentro el estilo display:block

Otra complicación a la hora de hacer la botonera es la animación que hace que los submenús se desplieguen. Esto se puede hacer ocultando los submenús con display:none inicialmente, y luego, cuando pase el cursor por encima de los li, asignarles el estilo display:block. Sin embargo, haciendolo de esta forma, nuestros submenús no tendrán animación. Para que si la tengan, les asigno una max-height de 0, y luego cuando pase el curso por encima lo aumento.

Sin embargo, cuando una capa tiene un contenido que excede sus dimensiones, el contenido se ve. En este caso el contenido, aunque sobrepasa la altura de 0, se ve igualmente. Para que no se vea el contenido de una capa que excede sus dimensiones, puedo utilizar el estilo overflow:hidden.

Aviso Legal | Política de privacidad