Wie erstelle ich mehrstufige Dropdown-Menüs in Twitter Bootstrap?

Mehrstufige Dropdown-Menüs mit Twitter Bootstrap

Twitter Bootstrap 2 fehlt die Funktion von mehrstufigen Dropdown-Menüs. Es gibt jedoch einen Workaround, der implementiert werden kann, um diese Funktionalität zu erreichen.

Ursprüngliche Antwort (Bootstrap Version 3)

In Bootstrap Version 3 und höher mehrstufige Dropdown-Menüs werden standardmäßig unterstützt. Ein Beispiel finden Sie in der folgenden Geige:

http://jsfiddle.net/2Smgv/2858/

Original Answer (Bootstrap Version 2)

Für ältere Versionen von Bootstrap gibt es hier einen CSS-Hack, der möglich ist angewendet:

/* CSS code for sub-menu customization */
.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;
}

Dieses CSS erstellt eine neue „.sub-menu“-Klasse zur Verarbeitung von Dropdown-Menüs mit zwei Ebenen, positioniert sie neben Menüelementen und ändert den Pfeil so, dass er links davon angezeigt wird die Untermenügruppe.

Demo

Eine Demo dieser Problemumgehung können Sie hier ansehen: [Demo Link]

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