DEV Community

Cover image for Off-canvas menu usando el modal de Bootstrap
Luis Badiali
Luis Badiali

Posted on

Off-canvas menu usando el modal de Bootstrap

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

Top comments (0)