Menú responsivo de Bootstrap 4 sin dependencias

Publicado por parzibyte en

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.

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


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: