Ist es möglich, ein mehrstufiges Dropdown-Menü mit den Elementen von Twitter Bootstrap 2 zu erstellen? Die Originalversion verfügt nicht über diese Funktion.
css
twitter-bootstrap
Hellnar
quelle
quelle
Antworten:
Aktualisierte Antwort
* Die Antwort wurde aktualisiert und unterstützt das Stylesheet der Bootstrap-Version v2.1.1 **.
** Aber seien Sie vorsichtig, da diese Lösung aus Version 3 entfernt wurde
Ich wollte nur darauf hinweisen, dass diese Lösung nicht mehr benötigt wird, da der neueste Bootstrap jetzt standardmäßig mehrstufige Dropdowns unterstützt. Sie können es weiterhin verwenden, wenn Sie ältere Versionen verwenden, aber für diejenigen, die auf die neueste Version (v2.1.1 zum Zeitpunkt des Schreibens) aktualisiert haben, wird es nicht mehr benötigt. Hier ist eine Geige mit dem aktualisierten mehrstufigen Standard-Dropdown direkt aus der Dokumentation:
http://jsfiddle.net/2Smgv/2858/
Ursprüngliche Antwort
Es wurden einige Probleme bei der Unterstützung von Untermenüs bei github angesprochen, die normalerweise von den Bootstrap-Entwicklern wie diesem geschlossen werden. Ich denke, es bleibt den Entwicklern überlassen, den Bootstrap zu verwenden, um etwas herauszufinden. Hier ist eine Demo, die ich zusammengestellt habe und die Ihnen zeigt, wie Sie ein funktionierendes Untermenü zusammenhacken können.
Relevanter Code
CSS
Ich habe meine eigene
.sub-menu
Klasse erstellt, um sie auf die Dropdown-Menüs mit zwei Ebenen anzuwenden. Auf diese Weise können wir sie neben unseren Menüelementen positionieren. Außerdem wurde der Pfeil so geändert, dass er links von der Untermenügruppe angezeigt wird.Demo
quelle
[Twitter Bootstrap v3]
So erstellen Sie in Twitter Bootstrap v3 ein Dropdown-Menü auf n-Ebene (Touch-Gerät-freundlich):
CSS:
JQuery:
HTML:
quelle
trigger.off('click');
vor dem Einstellen der Listener hinzugefügt , um ein "doppeltes Abhören" eines Ereignisses zu verhindern, falls die Javascript-Initialisierung mehr als einmal ausgelöst wird.Dieses Beispiel stammt von http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Funktioniert für mich in Bootstrap v3.1.1.
HTML
CSS
quelle
Ich konnte das Untermenü, das immer an der Spitze des übergeordneten Menüs steht, aus Andres 'Antwort mit folgendem Zusatz korrigieren:
Ich füge auch ein Symbol "icon-chevron-right" für Elemente hinzu, die Menü-Untermenüs enthalten, und ändere das Symbol beim Hover von Schwarz auf Weiß (um den Text zu ergänzen, der sich in Weiß ändert und mit dem ausgewählten blauen Hintergrund besser aussieht).
Hier ist die vollständige Änderung von less / css (ersetzen Sie die oben genannten durch diese):
quelle
Ich habe gerade
class="span2"
zu den<li>
Dropdown-Elementen hinzugefügt und das hat funktioniert.quelle
Da Bootstrap 3 den Untermenüteil entfernt hat und wir den Stil anpassen müssen, ist es meiner Meinung nach besser, mit SmartMenu Bootstrap zu arbeiten: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
Das würde uns Zeit bei der Reaktion und dem Stil von Mobilgeräten sparen.
Dieses Plugin ist auch sehr vielversprechend.
quelle