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

Cómo convertir las pestañas de Bootstrap en un menú desplegable

by
Difficulty:IntermediateLength:MediumLanguages:

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

Anteriormente, analizamos varias extensiones de Bootstrap 4. Hoy te mostraré cómo convertir las pills de Bootstrap en un menú desplegable. Lo más importante es que mantendremos ambos componentes sincronizados. Utilizaremos botones para el diseño de los equipos de escritorio y un menú desplegable para las pantallas de los dispositivos móviles.

Nota: Para este ejercicio, utilizaré la última versión estable de Bootstrap 4 (v4.6). Tan pronto como v5 sea estable, podría revisar nuevamente este tema e implementar también una solución para esta versión.

Nuestra extensión de Bootstrap

¡Revisa la demostración final! Haz clic en un elemento desplegable para  que veas cómo aparece el panel de pestañas correspondiente. Asimismo, abre la demostración y mira tu diseño en una pantalla grande. Verás que los botones sustituyen al menú desplegable sin cambiar el panel activo.

Así es como aparecen en sus dos estados:

Bootstrap dropdown to pills or tabs

¿Por qué hacer esto? De manera predeterminada, las tabs y pills de Bootstrap no tienen un comportamiento responsivo, aparte de apilarse/envolverse. Un menú desplegable es una solución mucho más elegante para pantallas pequeñas.

Tabs y pills de Bootstrap

Las tabs de Bootstrap nos ayudan a dividir el contenido en varias secciones que se alojen bajo una base común. En un momento dado, solamente una de estas secciones es visible. Imagínatelas como si fueran las pestañas del navegador; la diferencia es que no tienes que cambiar de página para verlas todas.

Bootstrap tabs

Las pills de Bootstrap son básicamente tabs con un diseño diferente.

Bootstrap pills

Para este ejemplo, usaremos pills. No obstante, puedes usar tabs con la misma facilidad. Todo lo que tiene que hacer es cambiar las clases y el marcado correspondiente.

1. Incluye los recursos de Bootstrap

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

The required Bootstrap CSS file
El archivo CSS de Bootstrap que se requiere
The required Bootstrap JavaScript files
Los archivos JavaScript de Bootstrap necesarios

2. Crea el diseño del proyecto

Nuestro proyecto en pantallas medianas y superiores (≥768px) se verá de esta forma:

The project layout on desktop screens

Aquí tendremos un contenedor que incluirá:

  • Las pills.
  • El contenido de cada pill (paneles de pestañas).
  • Los enlaces de redes sociales.

El marcado que se requiere:

La mayor parte de este marcado proviene de la documentación de Bootstrap, solamente han cambiado algunas cosas.

En pantallas más pequeñas (<768 px), reemplazaremos las pills con un menú desplegable como este:

The project layout on mobile screens

Pero, aquí está la parte interesante: si revisas el marcado anterior, notarás que no hemos definido ningún componente desplegable. Lo incluiremos en la página de manera dinámica mediante JavaScript.

3. Añade algunos estilos básicos

Luego, especificaremos algunos estilos básicos para nuestro proyecto. Cosas bastante sencillas. Simplemente anularemos algunos de los estilos predeterminados de Bootstrap para que se ajusten a nuestro diseño. Por ejemplo, cambiaremos la estética de las pills y le daremos a .container-fluid un ancho máximo de 1250 px.

Los estilos:

4. Añade el código JavaScript

Empezaremos por crear un bucle por todos los elementos .tabs-to-dropdown y, para cada uno de ellos, se llevarán a cabo varias acciones:

Nota 1: Utilizaremos un bucle aquí, pues asumimos que nuestra página puede contener más de un elemento .tabs-to-dropdown.

Multiple tabs

Nota 2: En el código anterior, primero crearemos el menú desplegable y luego lo referenciaremos. Por este motivo, la función generateDropdownMarkup() viene antes de las variables relacionadas con el menú desplegable.

Crea el componente desplegable

Primero, llamaremos a la función generateDropdownMarkup() y le pasaremos el elemento .tabs-to-dropdown correspondiente.

Aquí está la declaración de la función:

Esta función generará el código para el componente de conmutación desplegable y lo antepondrá al elemento .nav-wrapper. Para lograr esto, dentro de esta función, llamaremos a generateDropdownLinksMarkup() que se encargará de crear los elementos del menú desplegable. Su texto coincidirá con el texto de las pills correspondientes.

Aquí está la declaración de la función:

Después de ejecutar estas funciones, el marcado desplegable se verá de esta forma:

The dropdown markup

Oculta el elemento duplicado del menú

Cada vez que abrimos el menú desplegable, debemos evitar que el botón de conmutación también aparezca como un elemento del menú. Así que, en lugar de esto:

Queremos esto:

En este caso, cuando el panel de la pestaña «Company» esté activo, el elemento del menú «Company» debe estar oculto.

Para implementar esta funcionalidad, aprovecharemos el evento show.bs.dropdown que ofrece Bootstrap:

Dentro de la función de callback, haremos lo siguiente:

  • Tomaremos el texto del botón de conmutación.
  • Crearemos un bucle a través de los enlaces del menú y analizaremos si su texto coincide con el texto del botón.
  • Si este es el caso, recibirán la clase d-none. De otra manera, perderán este.

Sincroniza el menú desplegable con las pills

El último paso y el más difícil es sincronizar el menú desplegable y las pills.

Synchronize tabs and dropdown

Así que, primero, cada vez que hagamos clic en un elemento del menú desplegable, debe aparecer el panel de pestañas correspondiente.

Aquí está el código que se requiere:

Dentro de la función de callback, haremos lo siguiente:

  • Tomaremos index y el texto del enlace objetivo/activo.
  • Reemplazaremos el texto del botón de conmutación con el texto del enlace activo.
  • Seleccionaremos la pill cuyo index coincida con el index del enlace activo y muestre su panel asociado.

Luego, cada vez que hagamos clic en una pill, el texto del botón de conmutación debería cambiar y coincidir con el texto de la pill correspondiente.

Para aplicar esta funcionalidad, aprovecharemos el evento shown.bs.tab que proporciona Bootstrap:

Dentro de la función de callback, haremos lo siguiente:

  • Tomaremos el index de la pill activa.
  • Tomaremos el texto del elemento del menú desplegable cuyo index coincida con el index de la pill activa.
  • Reemplazaremos el texto del botón de conmutación desplegable con el texto del elemento del menú correspondiente.

Conclusión

¡Eso es todo, amigos! Gracias por seguir otro tutorial de Bootstrap 4. Esperemos que esta extensión te haya dado una idea de cómo manejar las pills en un diseño móvil. Como viste, convertirlos en un componente desplegable completamente funcional no es tan difícil como parece.

¡Ahora haz el mismo trabajo con las tabs!

Si te ha resultado útil esta solución o si tienes alguna pregunta, ¡déjame un comentario! Asimismo, hazme saber si deseas ver otras extensiones de Bootstrap.

Este es un recordatorio de nuestra extensión:

Como siempre, ¡muchas gracias por leer!

Tutoriales y recursos de Bootstrap

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.