Wie erstelle ich in Bootstrap eine responsive Navbar-Seitenleisten-„Schublade'?

Erstellen Sie eine Responsive Navbar-Seitenleiste „Schublade“ in Bootstrap

Bootstrap 5 führt eine offizielle Offcanvas-Komponente ein, die die Erstellung von Seitenleisten vereinfacht. Das Erstellen einer Seitenleiste ohne die Komponente ist jedoch weiterhin möglich.

Überlegungen zu Seitenleisten-Navigationen

Seitenleisten-Navigationsmenüs können verschiedene Herausforderungen mit sich bringen:

• Reaktionsfähigkeit: Soll die Breite, Sichtbarkeit oder Ausrichtung der Seitenleiste je nach Bildschirm angepasst werden? Größe?
• Mehrstufig: Sollten die Navigationselemente Unterebenen enthalten und wie wird ihre Höhe angepasst?
• Umschalten: Kann die Seitenleiste über eine Schaltfläche oder ein Symbol umgeschaltet werden?
• Positionierung: Sollte die Seitenleiste sein neben oder hinter dem Seiteninhalt positioniert?
• Platzierung:Soll die Seitenleiste auf der linken oder rechten Seite erscheinen?
• Scrollen:Wie soll die Seitenleiste angezeigt werden? im Verhältnis zur Seite scrollen?
• Animation: Soll die Seitenleiste verschoben, ausgeblendet oder ausgeblendet werden? ins Blickfeld?

Empfohlener Ansatz

In diesem speziellen Fall sollten Sie anstelle der Verwendung von col-auto in der rechten Spalte die Verwendung von col in Betracht ziehen, um die Breite zu füllen, wenn das Menü minimiert ist:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark">
<h3 id="Erweiterte-Seitenleiste-mit-fester-Breite">Erweiterte Seitenleiste mit fester Breite</h3>
<p>Die folgende aktualisierte Seitenleiste kommt dem von Ihnen bereitgestellten Beispiel näher und verfügt über eine feste Breite Breite, adaptives Verhalten und eine Animation zum Schieben nach links/rechts:</p>
<pre class="brush:php;toolbar:false">/* Set sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

/* Adjust sidebar on collapsing */
.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

/* Adjust sidebar on collapsing */
.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

Seitenleiste mit vollem Funktionsumfang

Diese erweiterte Seitenleiste enthält zusätzliche Funktionen:

• Feste Breite
• Adaptives Verhalten (Klappt oder Overlays basierend auf der Bildschirmgröße)
• Umschalten
• Responsiv (Wird auf kleineren Bildschirmen zu einem Overlay)

/* Optional for overlay sidebar on small screens */
@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}