Comment créer un menu déroulant à plusieurs niveaux dans Twitter Bootstrap 2 ?

Menu déroulant à plusieurs niveaux dans Twitter Bootstrap 2

Il est possible de créer un menu déroulant à plusieurs niveaux en utilisant des éléments de Twitter Bootstrap 2, même si cette fonctionnalité n'est pas supportée nativement .

Réponse mise à jour (Bootstrap v2.1.1)

Bootstrap prend désormais en charge les listes déroulantes à plusieurs niveaux par défaut dans la v2.1.1. La feuille de style mise à jour fournit un style pour les menus déroulants imbriqués.

Réponse originale

À l'origine, Bootstrap ne fournissait pas de prise en charge des sous-menus. Cependant, une solution personnalisée peut être mise en œuvre en tirant parti du CSS et du HTML.

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

HTML

Ajouter une classe .sub-menu aux éléments de menu déroulant imbriqués :

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Cette solution positionne les éléments imbriqués menu déroulant à droite de l'élément de menu parent et ajoute une flèche pour indiquer un sous-menu cliquable.

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!