Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

Cómo hacer que el menú desplegable de la barra de navegación de Bootstrap funcione al situar el puntero (on hover)

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

¿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:

The required Bootstrap CSS files
El archivo CSS Bootstrap requerido
The required Bootstrap JavaScript files
Los archivos JavaScript Bootstrap requeridos

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:

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.

¡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:

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:

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:

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.