loading...
Cover image for Off-canvas menu usando el modal de Bootstrap

Off-canvas menu usando el modal de Bootstrap

badiali profile image Luis Badiali ・2 min read

Vamos a ver cómo utilizar la estructura de un modal estándar de Bootstrap para construir un menú "Off-canvas" o lo que viene a ser lo mismo un menú desplegable lateral.

Off-canvas menu usando el modal de Bootstrap

El icono que he utilizado para desplegar es un icono animado por CSS, puedes descargar la librería desde aquí. Se le puede añadir diferentes clases que realizan diferentes animaciones. Este botón llama al modal a través de los atributos data: data-toggle="modal" data-target="#menuModal"

Estructura HTML del icono

Hamburger icono animado por CSS

Javascript para cambiar los estados del icono

Javascript para mostrar u ocultar el menú lateral

Al hacer clic añade una clase al icono para iniciar la animación y al cerrarse el modal le quita esta clase para volver al estado inicial

El modal tiene un atributo data-backdrop="" para quitar el fondo con transparencia que suele aparecer, de esta manera se podrá hacer clic en el botón de cerrar menú.

Estructura del modal

Off-canvas menu usando el modal de Bootstrap

He omitido el contenido del modal ya que se puede ver con más detalle desde codepen.io

La parte más importante de CSS es donde le decimos al modal la posición de inicio y la posición final al desplegarse. El CSS está realizado con SCSS.

Off-canvas menu usando el modal de Bootstrap

Puedes probar, modificar o descargar el código desde codepen.io dejo incrustado el código para que puedas verlo.

Cualquier duda o comentario será bienvenido. ¡Un saludo!

Resultado final

Posted on by:

badiali profile

Luis Badiali

@badiali

Diseño UI/UX y desarrollo frontend 👨🏻‍💻 apasionado del mar 🌊 la vela 🌬 ⛵️ y el arte 🎨

Discussion

markdown guide