Esta mañana, un cliente me pedía un menú desplegable (dropdown menu) para su sitio web (hecho en HTML puro). Cosa muy sencilla, que va de ocultar/mostrar elementos con la propiedad display de CSS.
En code-tricks tienen un excelente ejemplo de menú desplegable, hecho con listas. El menú de mi cliente está hecho con tablas, así que para modificar su código lo menos posible, adapté el ejemplo de code-tricks para tablas. Por supuesto, siendo obsoleto el uso de tablas para maquetación, recomiendo utilizar listas, pero por si acaso se presenta el caso, les muestro el código.
El HTML:
<table cellpadding="0" cellspacing="0" style="text-align:center">
<tr>
<td class="menu" width="120">
<a href="#">Item 1</a>
<ul class="sub-menu">
<li><a href="sub1-1.htm">Sub Menu 1-1</a></li>
<li><a href="sub1-2.htm">Sub Menu 1-2</a></li>
<li><a href="sub1-3.htm">Sub Menu 1-3</a></li>
<li><a href="sub1-4.htm">Sub Menu 1-4</a></li>
</ul>
</td>
<td class="menu" width="120">
<a href="#">Item 2</a>
<ul class="sub-menu">
<li><a href="sub2-1.htm">Sub Menu 2-1</a></li>
<li><a href="sub2-2.htm">Sub Menu 2-2</a></li>
<li><a href="sub2-3.htm">Sub Menu 2-3</a></li>
</ul>
</td>
<td class="menu" width="120">
<a href="#">Item 3</a>
<ul class="sub-menu">
<li><a href="sub3-1.htm">Sub Menu 3-1</a></li>
<li><a href="sub3-2.htm">Sub Menu 3-2</a></li>
<li><a href="sub3-3.htm">Sub Menu 3-3</a></li>
</ul>
</td>
</tr>
</table>
El CSS:
.menu, .menu ul.sub-menu {
padding:0;
margin: 0;
}
.menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
background: url(../images/nav-bar.png) center left repeat-x;
}
.menu a, .menu ul.sub-menu li a {
text-decoration: none;
padding: 5px;
display:inline-block;
}
.menu {
position: relative;
}
/*sub menu*/
.menu ul.sub-menu {
display:none;
position: absolute;
top: 40px;
width: 100px;
}
.menu:hover ul.sub-menu {
display:block;
}
Y el resultado es este:
Por supuesto necesitaremos darle formato para adaptarlo a las necesidades del momento. Este ejemplo es sólo una base para ello.
