En este post voy a mostrarte un ejemplo de código para tener el menú responsivo de Bootstrap sin dependencias como jQuery, usando únicamente algunas líneas de JavaScript puro.

Bootstrap es el framework CSS por excelencia. Casi todo programador web lo conoce, es de hecho una base que hay que tener. Sin embargo, tiene una desventaja y es que normalmente no funciona sin jQuery (u otros frameworks).

A veces solo se necesita tener el menú responsivo pero sin importar todas las librerías de JavaScript, por eso es que hoy vengo a compartir cómo tener un menú responsivo de Bootstrap sin jQuery ni dependencias.

Menú responsivo de Bootstrap sin jQuery

El menú de navegación se compone de dos cosas principales:

  • Un botón con la clase “navbar-toggle”
  • Un div que tiene dentro los elementos del menú, y tiene la clase “collapse” y “navbar-collapse”

El div que tiene los elementos del menú puede tener la clase “show” y si la tiene entonces se mostrará de manera extendida en móviles.

Así que en resumen hay que escuchar el click del botón y agregar/quitar la clase al contenedor.

En este caso le agregué un id a cada elemento para hacer las cosas más fáciles.

Cuando se hace click en el botón, el menú se muestra y oculta en móviles, usando JavaScript puro. Todo esto se logra escuchando el click del botón y, en su ejecución, al elemento intercambiarle la clase “show”; es decir, si la tiene se remueve, y si no, se agrega.

Menú responsivo Bootstrap sin jQuery

Por cierto, el ejemplo está basado en una plantilla de Bootstrap.

Relacionado:  Enviar varios archivos a PHP con AngularJS y FormData

Puedes probar el ejemplo aquí (recuerda hacer pequeña la ventana del navegador).

Apoya al sitio

¿Mi artículo te ha resultado útil? haz una donación. También pudes suscribirte a mi boletín semanal en la parte de abajo

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 321 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: