Menú desplegable sólo con CSS

Muy buen menú con submenús desplegables solamente utilizando CSS, sin Javascript.

Por internet hay varios recursos de este tipo. Pero la mayoría de ellos son con CSS básico o implementan alguna solución con Javascript.

Aex.net implementa esta solución exclusivamente con CSS, pero que brinda un aspecto muy similar a lo que obtendríamos con jQuery.


El menú termina siendo compatible con la mayoría de los navegadores modernos (no, Internet Explorer 6 no, dije "modernos"): Firefox, Chrome, Safari, Opera, IE7+.

El HTML

<ul class="menu">
<li><a href="URL_enlace">Enlace simple</a></li>
<li class="drop">
<a href="#">Enlace con desplegable</a>
<span class="toggle"> </span>
<ul>
<li><a href="URL_enlace1">Submenú 1</a></li>
<li><a href="URL_enlace2">Submenú 2</a></li>
<li><a href="URL_enlace3">Submenú 3</a></li>
</ul>
</li>
</ul>

El CSS

ul.menu {
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}

ul.menu li {
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}

ul.menu li:hover {
-moz-border-radius: 4px;
background-color: #000;
border:2px solid  #A9A9A9;
}

ul.menu li a {
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}

ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}

ul.menu li.drop a {
padding-right: 7px;
}

ul.menu li.drop:hover li {
border: none;
}

ul.menu li.drop span.toggle {
background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
display: block;
float: left;
height: 26px;
margin: 0 5px;
padding: 0;
width: 20px;
}

ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}

ul.menu li ul {
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
}

ul.menu li ul li {
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}

ul.menu li ul li a {
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}

ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}

ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}

ul.menu li ul li:hover {
background-color: #000;
}

En donde dice "background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;", URL_toggle.png es la dirección del ícono indicador de submenús.

Consideraciones

- Como se dijo al inicio, no sirve en IE6
- En algunos elementos están implementados los bordes redondeados, con border-radius. Recordemos que no todos los navegadores lo soportan (IE, Opera), pero lo máximo que pasará es que los muestre en ángulo recto.
- Cuando el número de caracteres del enlace desplegable es menor que el de los items del submenú no se ajusta automáticamente el ancho
- Funciona bien con una o dos columnas.

Pueden ver el artículo original en el blog de Aex.net. También tiene los archivos necesarios para descargar y una demo online.

Posts relacionados