Ulzurrun de Asanza i Sàez

Crea un menú desplegable usando sólo CSS

Es habitual encontrar menús desplegables (drop down menus) en muchos sitios webs, y estos nos permiten acceder a las subpáginas de cada sitio de forma más rápida y nos ahorran el tiempo de cargar la página padre para ir a la hija. Es frecuente que estos menús usen Javascript para funcionar, y con él logran unos efectos bastante atractivos, pero para lograr un menú más accesible a aquellos que no puedan usar Javascript, podemos sustituirlo por CSS.

El HTML

Antes de meternos en el CSS, tenemos que decidir cómo será el HTML de nuestro menú desplegable. Yo he optado por crear una lista desordenada (<ul>), ya que es el sistema que más se suele usar, y que podemos encontrar, por ejemplo, en WordPress.

El aspecto de nuestro menú será este:

[html]
<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>
[/html]

El menú tiene 5 links principales, de los cuales el segundo link tiene tres sublinks, el tercero tiene dos sublinks y el quinto tiene dos sublinks de los cuales el primero tiene dos subsublinks.

El CSS

Voy a explicar un poco la lógica del menú. En principio el menú sólo tiene que mostrar los cinco links principales (links padres). Los demás deberían estar ocultos. Al pasar el cursor sobre un link padre, deberían mostrarse sus links hijos. Al pasar el cursor sobre uno de estos hijos, debería mostrarse sus hijos, y así sucesivamente.

Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.

[css]
body, ul, li {
margin:0;
padding:0;
}

ul {
list-style:none;
display:inline-block;
}

ul li {
float:left;
}[/css]

Ahora daremos un poco de estilo al menú principal. Esta parte se puede modificar para que el menú quede al gusto de cada uno y se adapte mejor al diseño del lugar donde va a estar.

[css]
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#3b3b3b;
}

ul#dropdownmenu li {
height:40px;
}

ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#FFF;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#CCC;
}
[/css]

Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. Esto lo haremos usando el selector :hover.

[css]
ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}
[/css]

Continuamos añadiendo algo de color a los sublinks:

[css]
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#999;
}
[/css]

Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y no debajo (si aparecen debajo se superponen a los siguientes links hijos).

[css]
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}

ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}
[/css]

Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links (padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.

Descarga y demo

Como es costumbre, he preparado una pequeña demo del menú desplegable para que podáis comprobar el resultado.

También está disponible la misma demo en un archivo comprimido para que la descarguéis si tenéis problemas con el tutorial.


14 replies on “Crea un menú desplegable usando sólo CSS

  1. excelente tuto pero donde meto ese codigo en que parte :-S :-S :-S :-S :-S

  2. @misterio: Si tienes dudas sobre la posición del código, puedes descargar el ejemplo y ver cómo queda al final.

    Si lo prefieres, también puedes ver la demo y fijarte en el código fuente.

    :-)

  3. Muy buen ejemplo, bien explicado, realmente me ha servido. Muchas gracias!. (Y)

  4. Emm en IE no funciona el menu ocupa cada Link el 100% de la pantalla en horizontal probarlo (N)

    1. ¿En qué versión de IE? Porque acabo de probarlo en IE8 y funciona correctamente…

  5. Tiene muy buena pinta, muchas gracias ;)

  6. aunque tiene un pequeño problema, si agregas más opciones en submenu 5 estos siempre quedan en top:0, a alguien se le ocurre como alinearlos con la categoria correcta?

  7. Si agregas position:relative; a ul#dropdownmenu li:hover ul li se alinean correctamente, por si alguien lo necesita.

    1. Gracias por el consejo, actualizo el código del artículo con tu sugerencia.

  8. No logro de ningún modo hacer que el submenu aparezca en horizontal en vez de vertical uno encima del otro.
    ¿alguna sugerencia por favor?
    Muchas gracias

  9. Muy bueno pero tengo una dura bueno es un problema xD
    ya hise que funcione pero tengo varios link y unos solo tienen un sub link lo que hace que quede hasta el tope "top:0px;" y no alzanzo a selecionar el link. (Y)

    Como puedo hacer para que el sub link quede al mismo nivel que el link¿? :-(

    1. En la demo, aunque elimines el segundo sublink del link 5, no se superpone nada. ¿Seguro que has copiado el código correctamente?

  10. hehe no se si se pueda pero dejo el link lo subi es "http://nerosuan.zobyhost.com/&quot; y el css esta en css/subcss.css :P

    vizualizando esta mejor, le puse de 2 a 4 dependiendo del lugar espacios vacios para que no queden hasta arriba los link; de cuentas te vas a mexico los cabos tiene 3 espacio vacios y en vez de esos quiero que este los link en la misma linea de cabos x ejm gracias >.< mucho blablabla…

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar