Bootstrap5-Sidebar-Navigation (Offcanvas)
Die Bootstrap5-Sidebar ähnelt einer Modalbox und wird häufig auf mobilen Geräten verwendet.
Sliding-Navigation erstellen
Wir können JavaScript verwenden, um festzulegen, ob nach der.offcanvasKlasse hinzugefügt werden soll, fügen Sie die.showKlasse hinzu, wodurch die Anzeige und das Ausblenden der Sidebar gesteuert wird:
.offcanvasInhalt ausblenden (Standard).offcanvas.showInhalt anzeigen
Sie können dashrefAttribut eines a-Links verwenden, oder dasdata-bs-targetAttribut des button-Elements verwenden, um die Sidebar festzulegen. In beiden Fällen mussdata-bs-toggle="offcanvas"。
Das Beispiel zum Erstellen einer Sliding-Navigation sieht wie folgt aus:
Beispiel
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">Verwenden Sie das href-Attribut des Links</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Verwenden Sie data-bs-target im Button</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Seitenleiste</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<div>
Ein Beispieltext als Platzhalter. Im echten Leben können Sie die Elemente haben, die Sie ausgewählt haben. Zum Beispiel Text, Bilder, Listen usw.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown-Schaltfläche
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Andere Aktion</a></li>
<li><a class="dropdown-item" href="#">Etwas anderes hier</a></li>
</ul>
</div>
</div>
</div>
Ausprobieren »
Richtung der Seitenleiste
Die Richtung der Seitenleiste kann durch die folgenden vier Klassen gesteuert werden:
.offcanvas-startAnzeige auf der linken Seite, wie im obigen Beispiel..offcanvas-endAnzeige auf der rechten Seite.offcanvas-topAnzeige oben.offcanvas-bottomAnzeige unten
Beispiel
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Obere Navigationsleiste</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Wird in der oberen Navigationsleiste angezeigt</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Ausprobieren »
Beispiel
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Rechte Seitenleiste</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Wird in der rechten Seitenleiste angezeigt</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Ausprobieren »
Beispiel
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Untere Navigationsleiste</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Wird in der unteren Navigationsleiste angezeigt</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Ausprobieren »
Hintergrund und Scrollbarkeit des Hintergrunds festlegen
Wenn die Seitenleiste eingeblendet wird, können wir festlegen<body>ob das Element scrollen kann, und legen Sie außerdem fest, ob eine Backdrop-Canvas angezeigt werden soll. Verwenden Siedata-bs-scrollAttribut zum Festlegen<body>ob das Element scrollbar ist,data-bs-backdropum umzuschalten, ob die Backdrop-Canvas angezeigt wird.
Beispiel
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Body-Element kann scrollen</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Backdrop-Canvas anzeigen (Standard)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Scrollen erlauben und Backdrop-Canvas anzeigen</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Body-Inhalt kann scrollen</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<p>Scrollen Sie die Seite, um den Effekt zu sehen.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Backdrop-Canvas verwenden</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<p>Body-Inhalt kann nicht scrollen</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop-Canvas verwenden, Body-Inhalt kann scrollen</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<p>Scrollen Sie die Seite, um den Effekt zu sehen.</p>
</div>
</div>
Ausprobieren »
