Comment changer le point de rupture du menu déroulant Bootstrap ?
Mise en œuvre de points de rupture personnalisés
Requêtes média CSS
Les requêtes média CSS vous permettent de créer des points de rupture personnalisés pour votre barre de navigation, vous donnant le contrôle sur le moment où elle se replie. Cette méthode fonctionne pour Bootstrap 4 et 5, et peut être utilisée avec n'importe quel préprocesseur CSS, y compris Stylus.
Pour mettre en œuvre un point de rupture personnalisé à l'aide de requêtes média CSS :
- Choisissez votre largeur de point de rupture (par exemple, 1000px).
- Écrivez une requête média pour les écrans en dessous de cette largeur.
- Ajoutez des règles CSS pour modifier la mise en page et le comportement de la barre de navigation.
Voici un exemple de comment définir un point de rupture personnalisé à 1000px :
@media (max-width: 1000px) {
.navbar-toggler {
display: block;
}
.navbar-collapse {
display: none;
}
.navbar-collapse.show {
display: block;
}
.navbar-nav {
flex-direction: column;
}
}Ce CSS fait ce qui suit :
- Affiche le bouton de bascule de la barre de navigation (menu hamburger) en dessous de 1000px
- Cache le contenu de la barre de navigation par défaut
- Affiche le contenu de la barre de navigation lorsque la classe 'show' est ajoutée (généralement par JavaScript lorsque le bouton de bascule est cliqué)
- Empile les éléments de navigation verticalement
Pour ajuster les styles de la barre de navigation pour différentes tailles d'écran, vous pouvez ajouter plus de règles dans votre requête média :
@media (max-width: 1000px) {
/* Règles précédentes */
.navbar-nav .nav-item {
margin-bottom: 10px;
}
.navbar-brand {
margin-right: auto;
}
.navbar .container {
flex-wrap: wrap;
}
}Ces règles supplémentaires :
- Ajoutent un espacement entre les éléments de navigation lorsqu'ils sont empilés
- Déplacent la marque vers le côté gauche
- Permettent au conteneur de la barre de navigation d'envelopper son contenu
Exemple: Ajustement fin des points de rupture
Commencez avec un point de rupture plus large et diminuez-le progressivement tout en testant sur différents appareils. Cela vous aide à trouver le point optimal où la mise en page de votre barre de navigation est belle à la fois sur les écrans de bureau et mobiles. Utilisez les outils de développement du navigateur pour simuler différentes tailles d'écran et ajustez votre requête média en conséquence.
Méthodes alternatives
Approche JavaScript
JavaScript offre une autre façon de contrôler le comportement de réduction de la barre de navigation, vous donnant plus de contrôle sur la réactivité de votre barre de navigation.
Pour utiliser JavaScript pour la réduction de la barre de navigation :
- Supprimez les classes de réduction par défaut de Bootstrap de votre barre de navigation.
- Ajoutez une classe personnalisée à votre barre de navigation pour le ciblage JavaScript.
- Écrivez une fonction JavaScript pour gérer le comportement de réduction.
Voici un exemple de mise en œuvre :
function handleNavbarCollapse() {
const navbar = document.querySelector('.custom-navbar');
const toggleButton = navbar.querySelector('.navbar-toggler');
const navbarContent = navbar.querySelector('.navbar-collapse');
function toggleNavbar() {
navbarContent.classList.toggle('show');
}
function checkWidth() {
if (window.innerWidth <= 1000) {
navbar.classList.add('navbar-collapsed');
navbarContent.classList.remove('show');
} else {
navbar.classList.remove('navbar-collapsed');
navbarContent.classList.add('show');
}
}
toggleButton.addEventListener('click', toggleNavbar);
window.addEventListener('resize', checkWidth);
checkWidth(); // Vérification initiale
}
handleNavbarCollapse();Ce code JavaScript :
- Cible une barre de navigation avec la classe 'custom-navbar'
- Bascule une classe 'show' sur le contenu de la barre de navigation lorsque le bouton de basculement est cliqué
- Vérifie la largeur de la fenêtre et ajoute/supprime des classes en conséquence
- Utilise un écouteur d'événements pour répondre aux redimensionnements de la fenêtre
Exemple: Astuce pour une transition fluide
Ajoutez des transitions CSS à vos éléments de barre de navigation pour un effet de réduction/expansion plus fluide :
.navbar-collapse {
transition: max-height 0.3s ease-out;
max-height: 0;
overflow: hidden;
}
.navbar-collapse.show {
max-height: 500px; /* Ajustez en fonction du contenu de votre barre de navigation */
}Variables SASS/SCSS
Si vous utilisez SASS ou SCSS dans votre projet, vous pouvez modifier les variables sources de Bootstrap pour changer le point de rupture de la barre de navigation. Bien que cette méthode ne s'applique pas directement à Stylus, il est utile de la connaître pour les projets qui utilisent SASS/SCSS.
Pour changer le point de rupture de la barre de navigation avec SASS :
- Créez un fichier SASS personnalisé (par exemple,
_custom-variables.scss). - Remplacez les variables de point de rupture par défaut de Bootstrap.
- Importez votre fichier de variables personnalisées avant les fichiers SASS de Bootstrap.
Voici un exemple de définition d'un point de rupture personnalisé :
// _custom-variables.scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px,
custom: 1000px // Ajoutez votre point de rupture personnalisé
);
$navbar-expand-breakpoint: custom;
// Fichier SASS principal
@import "custom-variables";
@import "bootstrap/scss/bootstrap";Cette méthode :
- Ajoute un point de rupture personnalisé au système de grille de Bootstrap
- Définit la barre de navigation pour s'étendre au point de rupture personnalisé
- Nécessite la recompilation des fichiers SASS de Bootstrap avec vos variables personnalisées
Bien que cette approche offre une intégration profonde avec Bootstrap, elle nécessite plus de configuration et peut ne pas convenir à tous les projets, en particulier ceux qui n'utilisent pas SASS/SCSS.