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

Créer un "tiroir" de barre latérale de barre de navigation réactive dans Bootstrap

Bootstrap 5 introduit un composant Offcanvas officiel qui simplifie la création de barres latérales. Cependant, créer une barre latérale sans le composant est toujours possible.

Considérations relatives aux navigations de la barre latérale

Les menus de navigation de la barre latérale peuvent poser divers défis :

• Réactivité : La barre latérale doit-elle ajuster sa largeur, sa visibilité ou son orientation en fonction de l'écran taille ?
• Multi-niveaux : Les éléments de navigation doivent-ils inclure des sous-niveaux et comment leur hauteur sera-t-elle prise en compte ?
• Basculement : La barre latérale peut-elle être basculé à l'aide d'un bouton ou d'une icône ?
• Positionnement : Le la barre latérale doit-elle être positionnée à côté ou derrière le contenu de la page ?
• Placement : La barre latérale doit-elle apparaître sur le côté gauche ou droit ?
• Défilement : Comment doit-elle apparaître la barre latérale défile par rapport à la page ?
• Animation : La barre latérale doit-elle glisser, s'effondrer ou apparaître en fondu ?

Approche recommandée

Dans ce cas précis, au lieu d'utiliser col-auto dans la colonne de droite, pensez à utiliser col pour remplir la largeur lorsque le menu est réduit :

<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="Barre-latérale-améliorée-avec-largeur-fixe">Barre latérale améliorée avec largeur fixe</h3>
<p>La barre latérale mise à jour suivante est plus proche de l'exemple que vous avez fourni et des fonctionnalités une largeur fixe, un comportement adaptatif et une animation de diapositive gauche/droite :</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;
}

Barre latérale complète

Cette barre latérale avancée comprend des fonctionnalités supplémentaires :

• Largeur fixe
• Comportement adaptatif (Réduire ou superposer en fonction de la taille de l'écran)
• Basculement
• Réactif (Devient une superposition sur des écrans plus petits)

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