SummArg | Cursos y recursos para webmasters

27/04/2012

Menú desplegable simple con jQuery

Siguiendo estos pasos podemos lograr un menú desplegable de dos niveles en pocos pasos utilizando CSS y jQuery. La estructura HTML del menú para nuestro ejercicio será la siguiente:

<ul class="menu">
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Tipos y Requisitos</a>
 <ul>
 <li><a href="#">Jubilaci&oacute;n</a></li>
 <li><a href="#">Pensi&oacute;n</a></li>
 <li><a href="#">Jubilaci&oacute;n por invalidez</a></li>
 <li><a href="#">Jubilaci&oacute;n por edad avanzada</a></li>
 </ul>
 </li>
 <li><a href="#">Reajustes</a></li>
 <li><a href="#">Contacto</a></li>
 </ul>

Mediante CSS nos encargamos de darle un poco de forma, primero ubicando cada elemento al lado del otro y no debajo del otro como se ubican por defecto las listas. Al elemento individual le indicaremos que debe tener position:relative, para que cuando una nueva lista parta del elemento pueda posicionarse correctamente utilizando position:absolute (más sobre positioning aquí). Al anchor le aplicamos text-transform:uppercase para colocar en mayúsculas su texto, colocamos color de fondo y de tipografía. Luego definimos el estado :hover, cambiando el color de fondo y de tipografía nuevamente para resaltarlo.

ul.menu {
 float:right;
 display:block;
 margin-top: 38px;
 list-style-type:none;
 }
 .menu li {
 line-height:18px;
 font-size:13px;
 position:relative;
 float:left;
 }
 .menu li a {
 color: #000;
 text-transform:uppercase;
 padding: 5px 20px;
 text-decoration:none;
 }
 .menu li a:hover {
 background: #9c0101;
 color: white;
 }

En el siguiente paso posicionamos la nueva lista que se abrirá como hija de un elemento <li>. Por defecto estará oculta (display:none) y con position y top acomodamos la lista para que se despliegue hacia abajo.

.menu li ul {
 display:none;
 position:absolute;
 top:20px;
 width: 240px;
 background-color: #f4f4f4;
 padding:0;
 list-style-type:none;
 }

Estilizamos un poco los elementos li hijos de esta nueva lista.

.menu li ul li {
 width: 200px;
 border: 1px solid #9c0101;
 border-top:none;
 padding: 10px 20px;
 }
 .menu li ul li:first-child {
 border-top: 1px solid #9c0101;
 }
.menu li ul li a {
 width: 240px;
 margin: 0;
 padding:0;
 }
.menu li ul li a:hover {
 width: 240px;
 margin: 0;
 color: #9c0101;
 background:none;
 }

Y finalmente utilizamos jQuery para indicar que a cada ul li que tenga una etiqueta ul de hija, se le modifique la propiedad display cada vez que el puntero del mouse pasa por arriba o sale del mismo.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('ul li:has(ul)').hover(
 function(e)
 {
 $(this).find('ul').css({display: "block"});
 },
 function(e)
 {
 $(this).find('ul').css({display: "none"});
 }
 );
 });
 </script>

Ver ejercicio

Dejar un comentario

  1. adrian

    Hola muy buen post gracias por tu aporte.

    tengo una inquettud, por donde puedo colocarle letras mayusculas o minusculas al menu, perdona si es basico eso y no lo se, pero me quedo muy bien lo unico es la letra que quiero poderla cambiar a minuscula o mayuscula segun mi preferencia.

    Otra cosa debajo del menu tengo unos botones de redes sociales en una cuando el menu se despliega queda por detras de los botones, como puedo solucionar ello gracias.

  2. No funciona para desplegables de varios niveles, es decir, a partir del primer UL, se abren todos los LI de golpe.

  3. Gracias por el tutorial es justo lo que estaba buscando, lo adaptare para usarlo en mis paginas.

  4. Lorenzo

    Muchas gracias! Claro, conciso y bien explicado.

    Me ha sido de mucha ayuda. Lo he modificado un poco, ¡y perfecto!

Dejar un comentario