Dropdown con jQuery

En este tutorial vamos a ver cómo puedes crear un menú con elementos dropwdown utilizando jQuery. Si no sabes usar jQuery, consulta primero el tutorial de introducción a jQuery.

Un dropdown es un elemento de un menú que muestra un submenú cuando haces clic en él. Estos elementos suelen representarse mediante una flecha apuntando hacia abajo, indicando la dirección en la que se desplegará el menú.

Si quieres agregar este elemento, comienza por incluir el script de jQuery y a luego sigue los pasos que verás a continuación.

Versión simplificada

Primero agregaremos el código HTML, en el que definimos un elemento semántico de tipo <nav> que contendrá un menú en su interior. El menú se compone de una lista cuyos elementos contienen un enlace. Además, en caso de agregar un dropdown, añadimos otra lista de enlaces con la clase .dropdown al mismo nivel que el enlace de menú.

<h1>Dropdown</h1>

<nav>
  <ul>
    <li>
      <a href="#">Dropdown A</a>
      <ul class="dropdown">
        <li><a href="#">Enlace A1</a></li>
        <li><a href="#">Enlace A2</a></li>
        <li><a href="#">Enlace A3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Enlace B</a>
    </li>
  </ul>
</nav>

A continuación vamos a agregar el código jQuery que nos permitirá interactuar con el dropdown. Vamos a detectar cualquier clic en un enlace del menú que contenga más de un elemento. Para ello usamos el selector 'nav ul li a:not(:only-child)'. De este modo, la acción se asociará exclusivamente a los elementos del menú que también contengan un submenú.

En el interior de la función que agregamos como acción, cambiamos la visibilidad del elemento del elemento .dropdown que se incluye junto con el enlace en el que hemos hecho clic. Para ello usamos el método siblings('.dropdown'), que sirve para seleccionar los nodos hermanos del elemento actual que tengan la clase especificada.

Seguidamente, seleccionamos todas las listas con la clase .dropdown que haya en el menú, salvo la actual, y las ocultamos. Además, también usamos el método event.stopPropagation() para que se deje de computar el clic en otros elementos tal y como hemos podido ver en este tutorial.

$("nav ul li a:not(:only-child)").click(function(event) {
  $(this).siblings(".dropdown").toggle();

  $(".dropdown").not($(this).siblings()).hide();
  event.stopPropagation();
});

$(document).click(function() {
  $(".dropdown").hide();
});

Finalmente, detectaremos también cualquier clic en el documento HTML y asociaremos una acción que cierre todos los menús. Esta función se ejecutará siempre y cuando no se haga clic en un enlace con un dropdown, gracias al método event.stopPropagation() que hemos definido.

Ahora vamos a ocultar poo defecto todos los dropdowns mediante CSS:

.dropdown {
  display: none;
}

Y con esto ya estaría todo listo. Puedes ver el resultado en funcionamiento aquí.

Versión avanzada

Vamos a mejorar algo el aspecto de nuestro menú. Para ello bastará con que agreguemos algunos estilos CSS. Vamos a hacer que los elementos del menú se muestren en horizontal y que los dropdowns se muestren debajo de cada elemento al que pertenecen. Agregaremos también una flecha apuntando hacia abajo en los elementos que incluyan un dropdown:

html {
  min-height: 100%;
  font-family: 'Nunito', sans-serif;
}

body {
  background: #7db4fc;
  line-height: 1.5;
}

h1 {
  font-weight: 200;
  font-size: 3rem;
  color: #fff;
  text-align: center;
}

nav {
  margin: 0 auto;
  max-width: 400px;
  color: #222222;
  background:#f6f7f9;
}

nav::after {
  display: block;
  content: '';
  clear: both;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  color: #222222;
  text-decoration: none;
  padding: 1rem;
}

nav ul li a:hover,
nav ul li a:focus {
  background: #e7e9ef;
  color: #000;
}

nav ul li a:not(:only-child)::after {
  padding-left: 4px;
  content: ' ▾';
}

nav ul li ul li {
  min-width: 200px;
}

nav ul li ul li a {
  background: transparent;
  color: #4a5666;
  border-bottom: 1px solid #DDE0E7;
}

.dropdown {
  display: none;
  position: absolute;
  margin-top: 8px;
  background: #f6f7f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.dropdown::after {
  content: '';
  position: absolute;
  left: 25px;
  top: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
}

.dropdown:hover::after {
  border-bottom: 8px solid #F6F7F9;
}

Y con esto ya estaría listo. Puedes ver el resultado en funcionamiento aquí.

---