Offcanvas ist ein Bootstrap 5 -Plugin für ein Sidebar -Menü, das gemäß den Benutzeranforderungen auf dem Bildschirm von links, rechts oder unten angezeigt wird. Offcanvas kann auch als sekundäres Menü oder Hauptmenü verwendet werden und kann durch eine Taste oder einen Link ausgelöst werden. Wenn die Seitenleiste außerhalb der Kanala ausgelöst wird, blockiert sie die Seite aus einer beliebigen Art von Interaktion, da sich die Seite dahinter versteckt, wenn sich das Menü enthüllt.

Dieser Artikel enthält einen detaillierten Leitfaden zu:

• So erstellen Sie die Offcanvas -Seitenleiste
• Verschiedene Positionen der Offcanvas -Seitenleiste

So erstellen Sie die Offcanvas -Seitenleiste

Fügen Sie hinzu, um eine Offcanvas -Seitenleiste zu erstellen .Offcanvas Klasse in einem Div -Tag mit seiner Position zu enthüllen .Offcanvas-Start und ein einzigartiges Ausweis. Wickeln Sie anschließend diese DIV um eine DIV mit der Klasse .Offcanvas-Header das enthält den Seitenleistentitel mit seiner Entlassungstaste und einer DIV mit der Klasse .Offcanvas-Körper welches den Inhalt der Seitenleiste enthält.

Zuletzt, um die Offcanvas -Seitenleiste auszulösen Data-BS-Toggle = "Offcanvas" Und Data-BS-target = "#id" Um die Seitenleiste mit einer Schaltfläche oder einem Link zu verbinden, der beim Klicken auf die Offcanvas -Seitenleiste zeigt:

Code

Speisekarte

Heim
Um
Produkt
Kontaktiere uns
Einstellungen

Offcanvas -Seitenleiste

Button unten öffnet die Offcanvas -Seitenleiste.

Offen

So erstellen Sie eine Offcanvas -Seitenleiste in Bootstrap 5.

Offcanvas -Positionen

Die Offcanvas -Seitenleiste kann nach Benutzeranforderung aus einer beliebigen Kante des Bildschirms enthüllt werden. Um die Offcanvas -Position anzugeben, fügen Sie einfach hinzu .Offcanvas-Start/End/Oben/unten Klasse mit .Offcanvas Klasse.

Start

.Offcanvas-Start Die Klasse enthüllt die Seitenleiste von der linken Seite der Seite.

Ende

.Offcanvas-Ende Die Klasse enthüllt die Seitenleiste von der rechten Seite von der Seite.

Spitze

.Offcanvas-Top Die Klasse enthüllt die Seitenleiste von der Oberseite der Seite.

Unterseite

.OFFCANVAS-BOTTOM Die Klasse enthüllt die Seitenleiste von der unteren Seite der Seite.

Abschluss

Offcanvas Die Seitenleiste wird durch Hinzufügen erstellt .Offcanvas Klasse zu einem Div. Dann füge hinzu .Offcanvas-Start/End/Oben/unten um die Seitenleisteposition anzugeben und Ausweis Attribut, um der Seitenleiste eine eindeutige ID zu geben. Wickeln Sie diese DIV danach mit der Klasse um eine DIV ein .Offcanvas-Header das enthält den Seitenleistentitel mit seiner Entlassungstaste und einer DIV mit der Klasse .Offcanvas-Körper welches den Inhalt der Seitenleiste enthält. Nun, um die Offcanvas -Seitenleiste auszulösen Data-BS-Toggle = "Offcanvas" Und Data-BS-target = "#id" Um die Seitenleiste mit einer Schaltfläche oder einem Link zu verbinden, die beim Klicken auf die Offcanvas -Seitenleiste enthüllt.