Blog de Web Idea - Recursos de Programación y Optimización Web » Blog Archive

Menu desplegable en CSS

23 March, 2009 – 00:54 am

Hace unos años, si queríamos poner un menú desplegable en nuestra web, teníamos que recurrir al javascript, lo que presentaba problemas de accesibilidad, y carga de diversos scripts en nuestro <head>, que hacían que aumentase el peso de nuestras páginas, y por tanto ralentizaban la carga.

Actualmente, se pueden construir menúes desplegables totalmente accesibles y configurables, gracias a las listas de HTML y el CSS.

Supongamos que queremos construir un menú con un par de secciones principales, y varias sub-secciones en el interior de cada una de estas. En el código HTML, lo único que tendríamos que hacer es crear una lista <ul> con dos items <li> y dentro de cada uno de los items, anidar otra lista con varios elementos.

<!– Código HTML para el ejemplo de menú desplegable –>
<div class=”desplegable”>
<ul>
<li>Webs Interesantes
<ul>
<li>Santiago Cuenca</li>
<li>Webidea</li>
<li>Dragon Ball Z</li>
<li>Naruto Shippuden</li>
<li>Instalaciones Eléctricas</li>
<li>Saint Seiya</li>
<li>Design Training</li>
<li>Aranjuez</li>
</ul>
</li>
<li>Blogs SEO
<ul>
<li>SEO Femenino</li>
<li>Webidea</li>
<li>Google Dirson</li>
<li>Adseok</li>
<li>Sergio Blanco</li>
<li>SEO Profesional</li>
</ul>
</li>
</ul>
</div>

Simplemente añadiendo un enlace a cada uno de los elementos en la lista, nos quedaría algo así:

Webs Interesantes
Blogs SEO

Ahora tenemos que aplicar los correspondientes estilos CSS:

/* Le damos un ancho estándar a las listas, un borde, fondo y le quitamos estilos de lista y márgenes */
.desplegable ul{width:150px; border:1px solid #00749e; background:#fff; padding:0; margin:0; list-style-type:none;}

/* Damos un poco de relleno a los items */
.desplegable ul li{padding:.5em;}

/* Le decimos a la lista anidada que no se muestre y le damos estilo a los enlaces */
.desplegable ul li ul{display:none;}
.desplegable ul li a{text-decoration:none; display:block; width:100%; height:100%;}

/* Resaltamos el fondo del item al pasar sobre él y cambiamos el color del texto */
.desplegable ul li:hover{background:#00749E; color:#000;}
.desplegable ul li:hover a{color:#000;}

/* Cuando un item está activo y tiene lista anidada, lo mostramos con display:block */
.desplegable ul li:hover ul{display:block; position:absolute; margin:-20px 0 0 140px;}