Comment créer un « tiroir » de barre latérale de navigation réactive dans Bootstrap 5 ?

Créer un « tiroir » de barre de navigation latérale réactive dans Bootstrap ?

Utiliser Bootstrap 5 Beta 3 (mise à jour 2021)

Bootstrap propose désormais un composant Offcanvas, facilitant la création barres latérales.

Utilisation de Bootstrap 4 (réponse originale)

Considérations relatives aux barres latérales :

• Réactivité
• Multi-niveaux structure
• Toggleability
• Positionnement (pousser ou superposer, gauche ou droite)
• Comportement fixe ou collant
• Style d'animation

Répondre aux spécificités exigences :

1. Réactivité :

• Mettre à jour la classe de la colonne de droite en col au lieu de col-auto.

2. Défilement de la barre de navigation :

• Supprimez la classe collante de la barre de navigation pour l'empêcher de coller.

3. Bouton de menu collant :

• Le bouton de menu ne doit pas être collant, car il n'est pas aligné avec la barre latérale.

4. Gradateur d'arrière-plan :

• Ceci n'est pas couvert dans cette réponse.

Exemple de barre latérale avec des fonctionnalités améliorées :

Cet exemple de barre latérale ressemble beaucoup à celui du lien de référence et comprend :

• Corrigé largeur
• Fermeture automatique sur les écrans plus petits, ouverture sur les écrans plus larges
• Basculable sur toutes les largeurs
• Barre latérale de superposition réactive sur les écrans plus petits

CSS supplémentaire pour l'intégralité version :

.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

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

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

@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;
    }
}

Démo : https://codeply.com/go/w1AMD1EY3c

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!