Wie kann ich mehrstufige Dropdown-Menüs in Twitter Bootstrap 2 erstellen?

Erstellen von mehrstufigen Dropdown-Menüs mit Twitter Bootstrap 2

Twitter Bootstrap 2 bietet einen robusten Satz an Komponenten, mehrstufige Dropdown-Menüs werden jedoch nicht nativ unterstützt . Dieses Problem hat in der GitHub-Community Bedenken hervorgerufen und viele Entwickler dazu veranlasst, nach alternativen Lösungen zu suchen.

Um diese Einschränkung zu beheben, kann der folgende CSS-Code implementiert werden:

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

Durch Hinzufügen dieses CSS Für Ihre Anwendung können Sie eine benutzerdefinierte .sub-menu-Klasse erstellen, mit der Sie die Standard-Dropdown-Menüs um zusätzliche Ebenen erweitern können. Die Position und Sichtbarkeit des Untermenüs kann über CSS gesteuert werden.

Diese Lösung wurde vor Bootstrap Version 3 erstellt, die native Unterstützung für mehrstufige Dropdowns einführte. Wenn Sie Bootstrap Version 2 verwenden, eignet sich diese Lösung, um eine ähnliche Funktionalität zu erreichen. Für Bootstrap-Versionen 3 und höher ist die Verwendung dieser Lösung jedoch nicht mehr erforderlich.

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