Comment créer une liste déroulante à plusieurs niveaux en bootstrap

Pour créer un menu déroulant à plusieurs niveaux pour Bootstrap 5, vous devez combiner l'implémentation CSS et JavaScript personnalisés; 1. Utilisez une structure déroulante standard et un sous-menu avec une classe Dropdown-SubMenu; 2. Ajouter un sous-menu de positionnement CSS (comme à gauche: 100%) et éventuellement ajouter des styles de flèches; 3. Utilisez JavaScript pour empêcher les événements de bouillonner et de changer d'affichage sous-menu, ou d'utiliser: Trig à partir; 4. Assurer l'introduction de CSS et JS CDN de Bootstrap 5.3.2; Faites attention à l'expérience mobile et au support d'accessibilité des attributs ARIA et réalisez enfin le menu déroulant à plusieurs niveaux disponible sur les appareils.

La création d'une liste déroulante à plusieurs niveaux dans Bootstrap (spécifiquement Bootstrap 5, car les versions antérieures avaient une prise en charge plus intégrée pour les listes déroulantes) nécessite un peu de CSS personnalisé et une structure HTML appropriée, car Bootstrap 5 ne prend pas en charge les départs imbriqués par défaut. Voici comment créer un menu déroulant à plusieurs niveaux fonctionnel à l'aide de Bootstrap 5.

1. Structure HTML de base

Commencez avec une liste déroulante Bootstrap standard et nichez des menus déroulants supplémentaires à l'intérieur.

 <div class = "dropdown">
  <Button class = "btn btn-primary dropdown-toggle" type = "button" id = "dropdownmeButton" data-bs-toggle = "dropdown" aria-exiged = "false">
    Dropdown à plusieurs niveaux
  </ bouton>
  <ul class = "dropdown-menu" aria-labelledby = "dropdownmebutton">
    <li> <a class = "dropdown-item" href = "#"> item 1 </a> </li>
    <li> <a class = "dropdown-item" href = "#"> item 2 </a> </li>

    <! - Déclencheur dérouté imbriqué ->
    <li class = "dropdown-submenu">
      <a class = "dropdown-item Dropdown-toggle" href = "#"> subménu </a>
      <ul class = "dropdown-menu">
        <li> <a class = "dropdown-item" href = "#"> sub-item 1 </a> </li>
        <li> <a class = "dropdown-item" href = "#"> sub-item 2 </a> </li>

        <! - troisième niveau ->
        <li class = "dropdown-submenu">
          <a class = "dropdown-item Dropdown-toggle" href = "#"> sub-submenu </a>
          <ul class = "dropdown-menu">
            <li> <a class = "dropdown-item" href = "#"> élément final 1 </a> </li>
            <li> <a class = "dropdown-item" href = "#"> élément final 2 </a> </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. Ajouter des CSS personnalisés pour les menus imbriqués

Bootstrap ne stylise pas les éléments .dropdown-menu imbriqués par défaut, vous devez donc les positionner correctement.

 / * Positionner sous-menu par rapport au parent * /
.dropdown-submenu {
  Position: relative;
}

/ * Afficher le sous-menu sur Hover ou Cliquez (facultatif) * /
.Dropdown-subMenu .Dropdown-menu {
  en haut: 0;
  Gauche: 100%;
  marge: -6px;
  marge-gauche: -1px;
  Border-Radius: 0,375rem;
}

/ * Facultatif: Ajouter un indicateur de flèche pour le sous-menus * /
.dropdown-toggle :: après {
  marge-gauche: auto;
  marge-droite: 0;
}

.dropdown-submenu .dropdown-toggle :: après {
  marge-gauche: 0,25EM;
  Adigne vertical: 0,255EM;
  Border-top: 0.3em solide;
  Border-droite: 0,3EM solide transparent;
  Border-Bottom: 0;
  bordure-gauche: 0,3em solide transparent;
}

3. Gérer le sous-menu basculer avec JavaScript (facultatif)

Par défaut, Bootstrap masque toutes les listes déroulantes en clic. Pour ouvrir des menus imbriqués, vous pouvez utiliser un petit script pour arrêter la propagation et basculer la visibilité.

 document.QuerySelectorall ('. Dropdown-subMenu A.Dropdown-Toggle'). ForEach (fonction (élément) {
  element.addeventListener ('click', fonction (e) {
    E.PreventDefault ();
    e.stoppropagation ();
    this.parerentelement.classList.toggle ('show');
    this.nextelementsibling.classList.toggle ('show');
  });
});

Alternativement, utilisez le survol si préféré:

 .Dropdown-subMenu: Hover> .Dropdown-menu {
  Affichage: bloc;
}

Remarque: Hover peut ne pas fonctionner bien sur les appareils tactiles.

4. Inclure Bootstrap CDN

Assurez-vous d'inclure Bootstrap 5 CSS et JS:

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "Stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"> </ script>

Points clés pour se souvenir

• Utilisez dropdown-submenu comme classe personnalisée pour identifier les éléments imbriqués.
• Positionnez un sous-menus avec left: 100% pour les aligner à droite du parent.
• Empêchez l'événement bubbleing avec stopPropagation() dans JavaScript.
• Tester sur mobile - Les listes déroulantes à plusieurs niveaux peuvent être difficiles à utiliser sur les appareils tactiles.
• Considérez l'accessibilité: ajoutez dynamiquement aria-haspopup et aria-expanded les attributs si nécessaire.

Fondamentalement, Bootstrap vous donne les bases, mais les départs imbriqués ont besoin d'un peu de balisage et de style supplémentaires. Avec la bonne structure et quelques ajustements, vous pouvez avoir une liste déroulante à plusieurs niveaux en douceur qui fonctionne sur les appareils.

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!