Offanvas es un complemento Bootstrap 5 para un menú de barra lateral que aparece en la pantalla desde la izquierda, derecha o abajo según los requisitos del usuario. Offanvas se puede usar como un menú secundario o en el menú principal también y se puede activar por un botón o un enlace. Cuando se activa la barra lateral fuera del canvas, bloquea la página desde cualquier tipo de interacción porque cuando el menú se revela, la página se esconde detrás de ella.

Este artículo proporcionará una guía detallada sobre:

• Cómo crear barra lateral Offanvas
• Diferentes posiciones de la barra lateral de Offanvas

Cómo crear barra lateral Offanvas

Para crear una barra lateral Offanvas, agregue .offanvas clase en una etiqueta Div con su posición de revelar .de inicio y un único identificación. Luego, envuelva este div en un divir con la clase .titular que contiene el título de la barra lateral con su botón de despido y un DIV con la clase .fuera del cuerpo que contiene el contenido de la barra lateral.

Por último, para activar el uso de la barra lateral de Offanvas data-bs-toggle = "offcanvas" y data-bs-target = "#id" Para conectar la barra lateral con un botón o un enlace que, al hacer clic, revela la barra lateral OffCanvas:

Código

Menú

Hogar
Acerca de
Producto
Contáctenos
Ajustes

Barra lateral de cánvas

El botón a continuación se abrirá la barra lateral de Offanvas.

Abierto

Así es como se crea una barra lateral Offanvas en Bootstrap 5.

Posiciones de Offanvas

La barra lateral OffCanvas se puede revelar desde cualquier borde de la pantalla según los requisitos del usuario. Para especificar la posición OffanVas, simplemente agregue .OffCanvas-start/end/top/fondo clase con .offanvas clase.

Comenzar

.de inicio La clase revelará la barra lateral desde el lado izquierdo de la página.

Fin

.final La clase revelará la barra lateral desde el lado derecho de la página.

Arriba

.top-top La clase revelará la barra lateral desde el lado superior de la página.

Abajo

.de fondo La clase revelará la barra lateral desde el lado inferior de la página.

Conclusión

Offanvas La barra lateral se crea agregando .offanvas clase a un div. Luego añade .OffCanvas-start/end/top/fondo para especificar la posición de la barra lateral y identificación atributo para darle a la barra lateral una identificación única. Luego envuelve este div en un divir con la clase .titular que contiene el título de la barra lateral con su botón de despido y un DIV con la clase .fuera del cuerpo que contiene el contenido de la barra lateral. Ahora para activar el uso de la barra lateral Offanvas data-bs-toggle = "offcanvas" y data-bs-target = "#id" Para conectar la barra lateral con un botón o un enlace que, al hacer clic, revela la barra lateral Offanvas.