Autor: Jack Bach

Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.

Objetivo

Convertir un menú horizontal de un solo nivel en uno de varios niveles. Queremos que al pasar por encima de un ítem del primer nivel se vea un cuadro con las subcategorías. Tomaremos como base el menú del antiguo tutorial sobre menus con css, aunque no es imprescindible haberlo leído.

El HTML

Recordemos que el código que teníamos era este:

<div id="contenido">
 <div class="menu">
 <div id="menu_i"></div>    <div id="menu_d"></div>
 <ul>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Tutoriales</a></li>
 <li><a href="#">Tips</a></li>
 <li><a href="#">Freebies</a></li>
 <li><a href="#">Foro</a></li>
 </ul>
 </div><!-- fin Menu -->
</div><!--  fin Contenido -->

Vamos a añadir las subcategorías del menú. Para hacerlo, vamos a crear una lista dentro de otra lista. Dentro de las etiquetas <li> y </li> a las que van a pertenecer las subcategorías, después del link que finaliza con </a> insertamos otras etiquetas de <ul> y dentro de ellas los distintos ítems entre etiquetas <li>. Tenemos algo así:

<div id="contenido">
 <div>
 <div id="menu_i"></div>    <div id="menu_d"></div>
 <ul>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Tutoriales</a>
 <ul>
 <li><a href="#">Clasicos</a></li>
 <li><a href="#">Screencasts</a></li>
 <li><a href="#">Tips</a></li>
 </ul>
 </li>
 ...
 </ul>
 </div><!-- fin Menu -->
</div><!--  fin Contenido -->

Para las flechitas que salen encima de cada menu desplegable hemos añadido <span></span> al principio de cada submenu, en el código anterior sería después del <ul> de la línea 7.

El HTML fácil ¿verdad? Vamos a por CSS que es un poco más complicado…

El CSS

Antes de empezar con lo de hoy vamos a modificar dos cositas del ejemplo anterior:

1. En vez de usar display inline para alinear los ítems de la lista (li) usaremos el float left. El resultado es el mismo, pero hace que luego los submenus salgan en su sitio.

.menu li {
 float: left;
}

2. A causa de esto, la altura del menu (.menu) se ve reducida. Se podría solucionar con un clear both, aunque nosotros simplemente definiremos la altura con height.

.menu {
 height: 70px;
}

Dicho lo dicho vamos a por lo importante. La bases de este menú van a ser:

• La propiedad display que nos va a permitir hacer desaparecer un elemento de la página (none) o hacerlo aparecer (block).
• Podemos acceder de la siguiente forma a los estilos que hay  dentro de otro estilo cuando pasamos por encima de este último:

.menu ul li:hover ul {...}

El estilo que pongamos entre las dos llaves afectará al último ul cuando el ratón pase por encima del li que lo contiene.

Combinando esto podemos hacer que por defecto el display de .menu ul li ul sea none – es decir, que los submenus por defecto no se vean – pero que cuando pasemos por encima de un ítem de la primera lista aparezca este submenu – el display será block. Nos queda algo así:

.menu ul li ul {
display: none; /* De lo que hablábamos */
background: #cac99e ;
padding: 10px 0;
position: absolute; /* Muy importante */
margin: -12px -20px; /* Lo colocamos donde queremos */
.margin: 69px -170px; /* Hacks para colocarlo bien en ie */
_margin: 69px -170px;
}

.menu ul li:hover ul {
display: block;
}

Como hemos hecho que los li de .menu se alineen con float left, la lista del submenú también se alineeará. Para hacer que cada ítem salga en una línea usaremos float none.

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

Para la flecha de arriba emos usado <span></span> en el html. El código css es realmente sencillo: le damos un alto, un ancho, un fondo y posicionamos.

.menu ul li ul span {
background: url('img/flecha.png');
margin: -20px 50px;
width: 20px;
height: 10px;
position: absolute;
}

Y esto es más o menos todo. Lo demás son detalles que podéis ver descargandos el código. Cualquier duda o comentario, abajo tenéis un formulario, ¡Animaros! Si os ha gustado el tutorial acordaros de suscribiros al feed o seguirme en twitter.

Demo y Descarga

Descargar

Demo