Offcanvas è un plug -in Bootstrap 5 per un menu della barra laterale che appare sullo schermo da sinistra, destra o in basso secondo i requisiti dell'utente. Offcanvas può essere utilizzato come menu secondario o anche nel menu principale e può essere attivato da un pulsante o da un collegamento. Quando viene attivata la barra laterale off-canvas, blocca la pagina da qualsiasi tipo di interazione perché quando il menu si rivela la pagina dietro di essa.

Questo articolo fornirà una guida dettagliata su:

• Come creare la barra laterale offcanvas
• Posizioni diverse della barra laterale Offanvas

Come creare la barra laterale offcanvas

Per creare una barra laterale Offcanvas, aggiungi .Offcanvas classe in un tag DIV con la sua posizione di rivelazione .Offanvas-Start e un unico id. Successivamente, avvolgi questo div attorno a un div con la classe .Offcanvas-Header che contiene il titolo della barra laterale con il suo pulsante di licenziamento e un div con la classe .offcanvas-body che contiene il contenuto della barra laterale.

Infine, per attivare l'uso della barra laterale Offcanvas data-bs-toggle = "offcanvas" E data-bs-target = "#id" Per collegare la barra laterale con un pulsante o un collegamento che su un clic rivela la barra laterale Offanvas:

Codice

Menù

Casa
Di
Prodotto
Contattaci
Impostazioni

Barra laterale offanvas

Il pulsante sotto si aprirà la barra laterale di Offcanvas.

Aprire

Ecco come si crea una barra laterale Offanvas in Bootstrap 5.

Posizioni offcanvas

La barra laterale Offanvas può essere rivelata da qualsiasi bordo dello schermo secondo il requisito dell'utente. Per specificare la posizione Offcanvas, basta aggiungere .OffcanVas-Start/End/Top/Bottom classe con .Offcanvas classe.

Inizio

.Offanvas-Start La classe rivelerà la barra laterale dal lato sinistro della pagina.

FINE

.Offcanvas-end La classe rivelerà la barra laterale dal lato destro della pagina.

Superiore

.Offcanvas-top La classe rivelerà la barra laterale dal lato superiore della pagina.

Metter il fondo a

.Offcanvas-bottom La classe rivelerà la barra laterale dal lato inferiore della pagina.

Conclusione

Offcanvas la barra laterale viene creata aggiungendo .Offcanvas Classe per un div. Poi aggiungi .OffcanVas-Start/End/Top/Bottom per specificare la posizione della barra laterale e id attributo per dare alla barra laterale un ID univoco. Successivamente avvolgi questo div attorno a un div con la classe .Offcanvas-Header che contiene il titolo della barra laterale con il suo pulsante di licenziamento e un div con la classe .offcanvas-body che contiene il contenuto della barra laterale. Ora per attivare l'uso della barra laterale Offanvas data-bs-toggle = "offcanvas" E data-bs-target = "#id" Per collegare la barra laterale con un pulsante o un collegamento che a clic su rivela la barra laterale Offcanvas.