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

Création d'un tiroir de barre latérale de navigation réactive dans Bootstrap

Pour obtenir une barre latérale "tiroir" réactive comme celle de MUICSS, Bootstrap fournit en effet des outils qui peut être utilisé sans altérer de manière significative le CSS.

Implémentation du tiroir de la barre latérale à l'aide de Collapse, Stacked Pills et Flexbox :

< li>Contenu de la barre latérale : Utilisez un élément de navigation avec les classes flex-column et navbar-dark pour créer le contenu de la barre latérale avec des pilules empilées.

1. Comportement de réduction : Ajoutez les classes cliff et m-0 p-0 à l'élément parent de la barre latérale pour le masquer initialement et contrôler son affichage à l'aide du mécanisme de réduction Bootstrap.


2. Bouton bascule : Placez un bouton à l'extérieur de la barre latérale avec data-toggle="collapse" pour basculer la visibilité de la barre latérale lorsque vous cliquez dessus.


3. Fonctionnalités supplémentaires : Pour les fonctionnalités facultatives , comme l'ajout d'un arrière-plan plus sombre ou d'un comportement collant, vous pouvez utiliser du CSS ou du JavaScript personnalisé.

Améliorations pour répondre aux limitations de Jsfiddle :

• Mise en page réactive : Utilisez col-3 sur les écrans plus étroits et col-md-3 sur les écrans plus larges pour ajuster la largeur de la barre latérale.< ;/li>
  
• Sticky Navbar : Supprimez le sticky-top de l'élément de navigation de la barre latérale pour empêcher la barre de navigation de défiler.


• Bouton de menu collant : Ajoutez un dessus collant au bouton de menu (bascule) pour rester visible.


• Arrière-plan plus sombre : Utilisez une superposition CSS visible uniquement lorsque la barre latérale est ouverte (facultatif).

Remarques supplémentaires :

• Utiliser col au lieu de col-auto pour remplir la largeur lorsque le menu est réduit.
• Pour améliorer la fluidité de l'animation, remplacez la transition de réduction par défaut de Bootstrap, qui fonctionne sur la hauteur, en animant la largeur à la place.
• Pour une implémentation de tiroir plus complexe, considérez les réponses mises à jour qui fournissent deux exemples plus proches de la démo MUICSS.

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!