Menú vertical desplegable con HTML5 y CSS3

Una de las muchas cosas que me gusta poner en este espacio es pequeños tutoriales de como hacer algo para ayudarnos en las tareas de programación. Cómo instalar o configurar algo. Cómo hacer esto o lo otro. Presentar herramientas útiles o que he usado en mis trabajos. Este artículo es uno más de esos.

Si bien hay varias herramientas que permiten elaborar menues de forma rápida y con pocos clics, no siempre podemos tener esas herramientas a disposición. Debido a que uso Ubuntu no puedo instalar ese tipo de programas –o no me he puesto a buscarlos para Ubuntu– y cuando no se tiene la herramienta automatizadora, pues, hay que hacerlo a lo old school. A mano.

Esto es una replicación, un poco más simplificada y detallada del artículo sobre como hacer un menú desplegable que encontré hace un tiempo en Cristalab.

La idea de este menú es hacerlo sin usar JavaScript. Solo HTML5 y CSS. Todo gracias al selector :hover. El resultado final es algo así como esto :3

Para hacer este elemento necesitamos una lista desordenada. Para crear una lista desordenada usamos la etiqueta <ul></ul> la cual tiene los elementos hijos <li></li> que funcionan como los items del menú. Cómo el código siguiente:

<nav>
      <li class="parent"><a href="#">Cristalab</a>
         <ul>
            <li><a href="#">Blogs</a></li>
            <li><a href="#">Foros</a></li>
         </ul>
      </li>
      <li><a href="#">Mejorando.la</a></li>
      <li><a href="#">L4C</a></li>
      <li class="parent"><a href="#">Mas de Cristalab</a>
         <ul>
            <li><a href="#">Publica un tutorial</a></li>
            <li><a href="#">¿Qué es Cristalab?</a></li>
         </ul>
      </li>
 </nav>

Aclaro que el código es el que encuentran en el ejemplo que se encuentra en el artículo original.

En el código de arriba usamos la etiqueta que nos trajo la versión 5 de HTML <nav></nav> que tiene como razón de ser, funcionar para estos propósitos. Menús de navegación. Tenemos también listas desordenadas anidadas dentro de etiquetas <li></li> para darle profundidad al menú.

Los estilos para que funcione el menú desplegable son los siguientes:

nav{
   width:300px;
   margin: 5% auto;
}
nav li{
   list-style: none;
   position:relative; /* importante, para que el submenu tome la posición correcta*/
}
nav li a{
   text-decoration:none;
   padding: 5px;
   display:block;
}
nav li.parent:hover{
   margin:-1px;
}
nav li li a{
   width:250px;
   display:block;
}
/* aquí esta lo importante!! */
nav li ul {
   width: 250px;
   margin:0;
   display:none;
   position: absolute;
   left: 100%;
   top:-1px;
}
nav li:hover ul {
   display: block;
}

Lo importante de este código son los estilos que involucran al elemento <nav></nav> y los selectores descendentes a este. Del código original quité estilos de color y bordes para dejar lo que importa.

La explicación:

El truco es muy fácil, basta con crear un submenu en la forma hover, para luego desaparecerlo con display:none; . Y con ayuda del selector :hover volverlo a aparecer. Muy fácil!

Luego, se agregan animaciones con lo que nos brinda el estándar 3 de las hojas de estilo. Animaciones que son más personalizaciones que algo de utilidad del elemento, así que pueden verlas en el post original por si se les antoja.

De este modo tenemos un menú vertical desplegable, con muy pocas líneas de código, poco complicado y altamente personalizable.

No está de más aclarar siempre que este artículo, ni los códigos son inventos míos pero sí del autor del artículo original que siempre enlazo para dar crédito por lo que hizo. Que quede esto aquí para futuras búsquedas. Mías y suyas.