¿Alguna vez has creado una barra de navegación de Bootstrap con menús desplegables? Si la respuesta es «sí», quizá hayas notado que los menús desplegables de Bootstrap no aparecen al pasar el mouse sobre el enlace principal. En cambio, aparecen haciendo clic en él. Esta es una decisión de diseño intencional según Mark Otto, uno de los fundadores de Bootstrap:

«El propósito del estado de hover es indicar que se puede hacer clic en algo (texto subrayado) u ofrecer información rápida (URL completa en un recuadro de información). El propósito de un clic es hacer algo, tomar una acción explícita». - Mark Otto

¡Buen punto Mark! Pero existen algunas situaciones en las que los desarrolladores puedan preferir cuando se sitúe el puntero (hover). Por lo tanto, en este breve tutorial crearemos una barra de navegación típica de Bootstrap con una solución rápida para mostrar tus menús desplegables al situar el mouse por encima.

Nota: En este tutorial se asume que estás familiarizado con Bootstrap 4.

Barra de navegación de Bootstrap desplegable al situar el puntero

Esto es lo que vamos a crear

Nota: para que podamos ver los menús desplegables en acción incluidos en esta página, he utilizado las clases expansivas responsivas de Bootstrap; la navegación ahora se expande desde su estado móvil en el punto de interrupción medio (768 px por defecto). Tal vez prefieras usar el punto de interrupción más grande para evitar el «hover de doble toque» en los iPads.

Mejor aún, como no se debería juzgar la capacidad táctil de una pantalla por su tamaño, podrías utilizar Media Queries de nivel 4 de CSS para detectar si un usuario puede utilizar hover o la detección de funciones de JavaScript con Modernizr. No obstante, ninguno de estos métodos es 100% infalible.

De todos modos, ¡empecemos!

1. Incorpora los recursos de Bootstrap

Para iniciar, incluiremos los archivos CSS y JavaScript requeridos en nuestra demostración de Codepen:

2. Crea una simple barra de navegación

Para crearla, confiaremos en el código de ejemplo para el componente de la barra de navegación, generosamente proporcionado por Bootstrap:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img class="logo horizontal-logo" src="horizontal-logo.svg" alt="forecastr logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        ...
      </ul>
    </div>
  </div>
</navbar>

3. Añade algunos estilos básicos

Luego, especificamos tres reglas básicas de CSS para nuestro componente. No hacen mucho, solo añaden un poco de espacio estilístico y logran que la flecha desplegable haga una transición hacia abajo cuando se active el menú desplegable.

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear; 
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

¡Eso es! Hasta el momento hemos logrado crear una barra de navegación típica de Bootstrap:

Revisa la versión de escritorio de la barra de navegación para tener una idea adecuada de lo que está sucediendo. En cualquier caso, observa que los menús desplegables se abren cada vez que haces clic en el enlace principal correspondiente.

4. Personalizando los menús desplegables

Ahora modifiquemos el comportamiento predeterminado de los menús desplegables.

En pantallas pequeñas o inferiores (< 768 px), seguirán apareciendo haciendo clic en el enlace principal. No obstante, en pantallas medianas y superiores (≥ 768 px), haremos que aparezcan al situar el cursor sobre el elemento objetivo.

Para lograr esto, primero eliminaremos el margen superior predeterminado de los menús desplegables. Necesitamos eliminar este espacio para que el cursor del usuario pueda moverse del enlace principal al menú desplegable sin desactivarlo todo otra vez:

.dropdown-menu {
  margin-top: 0;
}

Luego, escribiremos algo de código jQuery el cual realizará las siguientes acciones:

• Este código se ejecutará al cargar la página y al cambiar el tamaño de la ventana.
• Si la ventana gráfica tiene al menos 768 píxeles de ancho, capturaremos los eventos mouseenter y mouseleave en los elementos del menú que contienen menús desplegables. Usaremos el evento hover como una abreviatura de esos eventos.
  
• Cada vez que situemos el cursor sobre un elemento del menú desplegable, recibirá la clase show predefinida de Bootstrap. La misma clase se añadirá a su menú desplegable. Finalmente, por razones de accesibilidad, el valor del atributo aria-expanded del enlace de conmutar desplegable cambiará a true. Lo opuesto ocurrirá cada vez que dejemos de pasar el cursor sobre un elemento del menú desplegable.
• Si la ventana tiene un ancho máximo de 767 px, desataremos los manejadores adjuntos a los eventos mouseenter y mouseleave. Esto evitará que nuestro comportamiento de hover tenga efecto en pantallas más pequeñas.

Con toda la hipótesis anterior, aquí está el código jQuery que necesitaremos:

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.find($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.find($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

Y la demostración resultante:

Para ver la nueva funcionalidad en todos sus estados, asegúrate de revisar la versión a pantalla completa de esta demostración.

Conclusión

¡Eso es todo amigos! Con solo unas pocas líneas de código, hemos logrado modificar la funcionalidad predeterminada de los menús desplegables de la barra de navegación de Bootstrap.

Recuerda que solo cubrimos situaciones en las que los menús desplegables son parte de una barra de navegación Bootstrap. También ten en cuenta que nuestra personalización puede no ser adecuada para todos los casos. Si tienes alguna otra solución para este rompecabezas, hazlo saber en los comentarios.

Como siempre, ¡muchas gracias por leer!

Lecturas adicionales

Si disfrutaste de esta adaptación de Bootstrap, tal vez también quieras mirar los siguientes tutoriales:

• Consejo rápido: Cómo personalizar el componente de acordeón de Bootstrap 4

  En este consejo rápido, crearemos un acordeón de Bootstrap 4 y le aplicaremos algunas personalizaciones. ¡Comencemos!

• Cómo personalizar los archivos Sass de Bootstrap con Grunt

  Hoy, aprenderemos cómo personalizar los archivos Sass de Bootstrap 4 con Grunt. En vez de Grunt, podríamos otro utilizar fácilmente otro ejecutor de tareas como Gulp, ...

• Cómo añadir enlaces profundos al componente de pestañas de Bootstrap 4

  En este nuevo tutorial, aprenderemos cómo añadir enlaces profundos a las pestañas de Bootstrap 4 y hacerlas compartibles.

También tenemos varios resúmenes de las plantillas de Bootstrap más vendidas:

• Bootstrap
  20 plantillas increíbles de Bootstrap para probar en 2019
  Paula Borowska
• Bootstrap
  15 plantillas de administrador de Bootstrap llenas de funciones
  Ian Yates