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">

Erweiterte Seitenleiste mit fester Breite

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:

/* 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;
    }
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich in Bootstrap eine responsive Navbar-Seitenleisten-„Schublade'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!