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.
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
Javascript para cambiar los estados del icono
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
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.
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)