Comment ajouter des sous-menus déroulants à Bootstrap ?

Lucas D. -

Problème : Ajout de sous-menus déroulants à Bootstrap

Bootstrap propose des composants de navigation, y compris des menus déroulants. Cependant, la création de sous-menus déroulants imbriqués dans ces menus n'est pas une fonctionnalité intégrée. Cette limitation peut rendre difficile l'organisation de structures de navigation complexes dans les sites web basés sur Bootstrap.

Mise en œuvre des sous-menus déroulants

Solution basée sur CSS pour Bootstrap 5

Pour ajouter des sous-menus déroulants dans Bootstrap 5, vous pouvez utiliser du CSS personnalisé. Cette méthode se concentre sur le positionnement des sous-menus et l'ajout d'effets de survol pour les éléments du menu.

Voici un exemple de CSS pour le positionnement des sous-menus :

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Ce CSS positionne le sous-menu à droite de son élément parent. Pour ajouter des effets de survol, incluez ce qui suit :

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Ce CSS affiche le sous-menu lorsque l'élément parent du menu est survolé.

Exemple: Éviter le débordement des sous-menus

Pour éviter que les sous-menus ne débordent de la zone visible sur les petits écrans, ajoutez ce CSS :

@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
  }
}

Cela positionne le sous-menu en dessous de son parent sur les petits écrans.

Approche améliorée par JavaScript

Pour un meilleur contrôle du comportement des sous-menus, vous pouvez utiliser JavaScript. Cette méthode aide à empêcher la fermeture des sous-menus et ajoute une fonctionnalité d'affichage par basculement.

Voici un exemple en JavaScript :

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling
    el.style.display = el.style.display === 'block' ? 'none' : 'block'
  })
})

Ce script empêche le sous-menu de se fermer lorsque le menu déroulant parent est ouvert. Il bascule l'affichage du sous-menu entre 'block' et 'none' lors du clic.

Méthodes alternatives

Sous-menus déroulants de la barre de navigation en CSS uniquement

Vous pouvez créer des sous-menus déroulants de la barre de navigation sans JavaScript. Cette méthode utilise le CSS pour styliser les menus déroulants imbriqués et activer les sous-menus au survol.

Pour styliser les menus déroulants imbriqués, utilisez ce CSS :

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Ce CSS place le sous-menu à droite de son élément parent, créant un aspect imbriqué.

Pour activer les sous-menus au survol, ajoutez ce CSS :

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Cette règle CSS affiche le sous-menu lorsque vous survolez l'élément parent du menu, créant une expérience de navigation fluide.

Exemple: Améliorer l'accessibilité

Pour rendre vos sous-menus en CSS plus accessibles, ajoutez un support de navigation au clavier. Vous pouvez le faire en utilisant la pseudo-classe :focus avec :hover dans vos règles CSS.

Adaptation aux différentes versions de Bootstrap

Implémentation du sous-menu Bootstrap 4

Bootstrap 4 nécessite des modifications CSS pour ajouter des sous-menus déroulants. Voici un exemple CSS pour Bootstrap 4 :

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

Ce CSS place le sous-menu à droite de son parent et l'affiche au survol.

Pour les options de sous-menu basées sur le clic, vous pouvez utiliser cette fonction JavaScript :

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  return false;
});

Ce script bascule la classe 'show' sur le sous-menu lorsqu'il est cliqué, permettant une navigation basée sur le clic.

Exemple: Amélioration de l'accessibilité

Pour améliorer l'accessibilité, ajoutez des attributs ARIA à vos éléments de menu déroulant. Par exemple :

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu déroulant
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Éléments du menu déroulant ici -->
  </div>
</li>

Cela aide les lecteurs d'écran à comprendre la structure et le comportement de vos menus déroulants.

Support hérité de Bootstrap 3

Pour Bootstrap 3, vous avez besoin de CSS personnalisé pour créer des sous-menus déroulants. Voici un exemple :

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

Ce CSS place le sous-menu et l'affiche au survol.

La structure HTML pour les menus déroulants imbriqués dans Bootstrap 3 ressemble à ceci :

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu déroulant <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sous-menu</a>
            <ul class="dropdown-menu">
                <li><a href="#">Élément de sous-menu 1</a></li>
                <li><a href="#">Élément de sous-menu 2</a></li>
            </ul>
        </li>
    </ul>
</li>

Cette structure crée un menu déroulant avec un sous-menu imbriqué, permettant une navigation à plusieurs niveaux dans Bootstrap 3.