Cómo hacer que funcione el botón de Nav de Bulma en Smartphone

1 minuto

Bulma

Bulma es un framework CSS fantástico. Pero eso no lo hace perfecto. Lamentablemente a la hora de hacer un botón de hamburguesa, o un botón para smartphone, el Component Nav no funciona. Apretas y no se despliega. Si que aparece el botón cuando reducimos, pero no se abre. La razón es porque Bulma busca el minimalismo. Nada de Javascript. Entonces… ¿Cómo hacemos que funcione el botón de Bulma? Con un poco de Javascript.

No es necesario ni usar JQuery ni un framework complicado de Javascript. Solo Vainilla.

Pega el siguiente código en la parte inferior de tu página, y listo.

<script>
// Variables
let boton_nav = document.querySelector('.nav-toggle');
let nav_menu = document.querySelector('.nav-menu');

// Eventos
boton_nav.addEventListener('click', function() {
	nav_menu.classList.toggle('is-active');
});
</script>

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...