Hoy quiero compartir con vosotros como construir un menú desplegable como el que veis en la cabecera de este blog, o vertical como el que os muestro a continuación de ejemplo:
Bueno compañeros, no os asusteis que es muy sencillito, sólo tiene CSS. Veamos
Bueno compañeros, no os asusteis que es muy sencillito, sólo tiene CSS. Veamos
- En primer lugar, construimos el código html de nuestro menú con listas convenientemente anidadas mediante las etiquetas <ul> y <li>, que añadiremos como elemento HTML a nuestra plantilla.
Sirva como ejemplo el código correspondiente al menú del ejemplo anterior:
- Ahora le daremos de estilo para obtener un menú vertical como el del ejemplo, para ello empleamos el siguiente CSS que os presento:
Como veis, excepto los campos display y position es completamente personalizable. Jugar con los márgenes puede permitirnos desplegar las opciones por un lateral, por abajo... la imaginación es cosa vuestra.
Sin embargo, hay que tener mucho cuidado al cambiar width, porque tambien debemos aplicar el mismo cambio a la posicion relativa left de sus menus interiores para que no se superpongan.
Sen máis...