Pourquoi n'y a-t-il pas de classe de sous-menu intégrée dans Bootstrap 3 et comment puis-je en créer une ?

Problème du sous-menu Bootstrap : causes et solutions

Malgré l'importance de Bootstrap 3 dans le développement, des inquiétudes sont apparues concernant l'absence apparente d'un sous-menu classe. Ce guide met en lumière les raisons de cette omission et propose des solutions pratiques pour implémenter des sous-menus.

Pourquoi le sous-menu déroulant est-il manquant dans Bootstrap 3 ?

Dans le parcours évolutif de Bootstrap, la classe du sous-menu déroulant est devenue obsolète avec l'avènement de Bootstrap 3 RC. Cette décision découle de la pertinence réduite des sous-menus dans la conception Web contemporaine, en particulier sur les appareils mobiles.

Solutions pour créer des sous-menus

Bootstrap 5 :

• Méthode JavaScript : Empêcher la fermeture du sous-menu lorsque la liste déroulante parent est ouverte en basculant l'affichage entre « bloquer » et « aucun ».
• Méthode CSS uniquement (pour les listes déroulantes de la barre de navigation) : Positionnez le sous-menu pour l'afficher à l'aide des événements de survol CSS.

Amorçage 4 :

• CSS Hack : Simulez la fonctionnalité de sous-menu avec des règles CSS supplémentaires, y compris des effets de positionnement et de survol.

Bootstrap 3 :

• Héritage Méthode : Utiliser le CSS et le balisage d'origine pour maintenir la compatibilité avec les anciennes versions de Bootstrap.

Exemple d'implémentation (Bootstrap 3) :

<div class="dropdown">
  <button class="dropdown-toggle" data-toggle="dropdown" type="button">
    Example Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
      <ul class="dropdown-menu">
        <li><a href="#">Link 1</a></li>
        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

.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;
}

Remarque : Des ajustements CSS supplémentaires peuvent être nécessaires pour aligner les sous-menus correctement.

En suivant ces directives, les développeurs peuvent facilement implémenter la fonctionnalité de sous-menu dans Bootstrap, quelle que soit la version utilisée.

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!