Menú desplegable con jQuery en 5 minutos – Consultoria y Formacion Adobe

Si aún no has descubierto la librería jQuery o aún no te crees su eslogan de "Write less, do more", éste es el momento: con ella vamos a aprender a crear un menú desplegable utilizando listas y muy pocas líneas de código. Para ello, sólo tienes que seguir estos pasos:

0. Descargar la librería

Si accedes a la página de jQuery, verás que a la derecha tienes un enlace para descargar la librería. Como no nos interesa (hoy) analizar su funcionamiento, lo mejor es que escojas la versión comprimida, que ocupa tan sólo 19 KB.

Por cierto, si no la has usado nunca, te recomiendo que te leas el Tutorial de jQuery aquí, en Cristalab.

1. Preparar el menú de navegación

Como, en estos tiempos que corren, nos interesa que la web sea lo más semántica posible, vamos a utilizar listas. Crea un nuevo documento HTML e introduce el siguiente código:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú desplegable con jQuery en 5 minutos</title>
</head>

<body>
<h1>Menú desplegable con jQuery en 5 minutos</h1>
<ul>
   <li><a href="#">Inicio</a>
      <ul>
         <li><a href="#">¿Qué es jQuery?</a></li>
         <li><a href="#">¿Por qué debería usarlo?</a></li>
         <li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li>
      </ul>
   </li>
   <li><a href="#">Ejemplos</a>
      <ul>
         <li><a href="#">Menú desplegable</a></li>
         <li><a href="#">Fade-in, fade-out</a></li>
      </ul>
   </li>
   <li><a href="#">Contacto</a></li>
</ul>
</body>
</html>

Lo cual producirá algo así.

Pero como esto es un pelín feo, vamos a darle un poco de estilo. Procurando que los enlaces principales aparezcan horizontalmente y sin entrar en detalles de CSS, el resultado sería algo así.

2. Esconder las listas secundarias

Añadiendo otra pequeña regla a nuestro estilo CSS, esconderemos las listas secundarias, de forma que sólo se vean, en principio, los enlaces primarios.

Código :

ul li ul {
   /* Resto de estilos... */
   display: none;
}

Quedando la cosa así.

Ahora estamos listos para empezar a escribir el JavaScript.

3. Escribir el código JavaScript

Empezamos, como siempre, con:

Código :

$(document).ready(function() {});

Y ahora, buscamos que, cuando el ratón pase por encima de cualquier elemento de lista que contenga, a su vez, otra lista, se muestre dicha lista secundaria. Haciendo uso de los magníficos selectores de jQuery y del evento "hover":

Código :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   // Muestra y oculta los menús
   $('ul li:has(ul)').hover(
      function(e)
      {
         $(this).find('ul').css({display: "block"});
      },
      function(e)
      {
         $(this).find('ul').css({display: "none"});
      }
   );
});
</script>

Explicamos lo que haya podido quedar un poco más dudoso:

El selector es ‘ul li:has(ul)’; es decir: todos los elementos de lista (li) que tengan, a su vez, otra lista [li:has(ul)] y que, obviamente, se encuentren dentro de una lista principal [ul li:has(ul)].
El evento "hover" requiere que se especifiquen dos funciones: una para cuando el ratón llega, y otra para cuando se va.
"this" hace referencia al elemento de lista sobre el que ha pasado el ratón.
find() sirve para lo que su propio nombre indica.

¡Y ya tenemos nuestro menú! Fácil, ¿verdad?