Wie erstelle ich ein mehrstufiges Dropdown-Menü in Twitter Bootstrap 2?

Mehrstufiges Dropdown-Menü in Twitter Bootstrap 2

Es ist möglich, ein mehrstufiges Dropdown-Menü mit Elementen aus Twitter Bootstrap 2 zu erstellen, auch wenn diese Funktion nicht nativ unterstützt wird .

Aktualisierte Antwort (Bootstrap v2.1.1)

Bootstrap unterstützt jetzt standardmäßig mehrstufige Dropdowns in v2.1.1. Das aktualisierte Stylesheet bietet Stil für verschachtelte Dropdown-Menüs.

Ursprüngliche Antwort

Ursprünglich bot Bootstrap keine Unterstützung für Untermenüs. Eine benutzerdefinierte Lösung kann jedoch durch die Nutzung von CSS und HTML implementiert werden.

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

Hinzufügen eine .sub-menu-Klasse für die verschachtelten Dropdown-Menüelemente:

<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>

Diese Lösung positioniert die verschachtelten Dropdown-Menü rechts neben dem übergeordneten Menüelement und fügt einen Pfeil hinzu, um ein anklickbares Untermenü anzuzeigen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein mehrstufiges Dropdown-Menü in Twitter Bootstrap 2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!