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!
