Bootstrap 3 ist immer noch bei RC, aber ich habe nur versucht, es zu implementieren. Ich konnte nicht herausfinden, wie man eine Untermenüklasse einfügt. Sogar es gibt keine Klasse in CSS und selbst die neuen Dokumente sagen nichts darüber aus
Es war dort in 2.x mit dem Klassennamen als Dropdown-Untermenü
Antworten:
Aktualisiert 2018
Das
dropdown-submenu
wurde in Bootstrap 3 RC entfernt. In den Worten des Bootstrap-Autors Mark Otto ..Mit etwas mehr CSS erhalten Sie jedoch die gleiche Funktionalität.
Bootstrap 4 (Navbar-Untermenü beim Hover)
Dropdown-Hover
für das Untermenü der Navigationsleiste Dropdown-Hover für das Untermenü der Navbar (rechtsbündig)
Dropdown-Menü für das Untermenü der Navbar (rechtsbündig)
Dropdown-Hover für die Navigationsleiste (kein Untermenü)
Bootstrap 3
Hier ist ein Beispiel, das 3.0 RC 1 verwendet: http://bootply.com/71520Hier ist ein Beispiel, das Bootstrap 3.0.0 (final) verwendet: http://bootply.com/86684
CSS
Beispiel-Markup
PS - Beispiel in der Navigationsleiste zum Anpassen der linken Position: http://bootply.com/92442
quelle
.dropdown-submenu:hover {background: #e2e1e1;}
Die @ skelly-Lösung ist gut, funktioniert jedoch nicht auf Mobilgeräten, da der Schwebezustand nicht funktioniert.
Ich habe ein wenig JS hinzugefügt, um das BS 2.3.2-Verhalten wiederherzustellen.
PS: Es funktioniert mit dem CSS, das Sie dort erhalten: http://bootply.com/71520, obwohl Sie den folgenden Teil kommentieren können:
CSS:
JS:
Das Ergebnis finden Sie in meinem WordPress-Theme (oben auf der Seite): http://shprinkone.julienrenaux.fr/
quelle
$(this).closest(".dropdown-submenu").toggleClass("open");
, wodurch die Menüpunkte für Links geöffnet / geschlossen werden. Um den Hover auf dem Desktop zu halten, ist eine Überprüfung der Breite des Ansichtsfensters des Browsers erforderlich, die für jede Site unterschiedlich ist.Bis heute (9. Januar 2014) unterstützt der Bootstrap 3 noch kein Dropdown-Menü für Untermenüs.
Ich suchte bei Google nach dem reaktionsschnellen Navigationsmenü und fand, dass dies das beste ist, das ich je gesehen habe.
Es ist Smart Menüs http://www.smartmenus.org/
Ich hoffe, dies ist der Ausweg für alle, die ein Navigationsmenü mit mehrstufigem Untermenü wünschen.
Update 17.02.2015 Intelligente Menüs unterstützen jetzt den Bootstrap-Elementstil für das Untermenü vollständig. Weitere Informationen finden Sie auf der Smart Menus-Website.
quelle
Shprinks Code hat mir am meisten geholfen, aber um das Dropdown-Menü außerhalb des Bildschirms zu vermeiden, habe ich ihn aktualisiert auf:
JS:
CSS: VON Hintergrundfarbe: #eeeeee ZU Hintergrundfarbe: # c5c5c5 - weiße Schrift und heller Hintergrund sahen nicht gut aus.
Ich hoffe, das hilft den Menschen genauso wie mir!
Aber ich hoffe, Bootstrap fügt die Subs-Funktion so schnell wie möglich wieder hinzu.
quelle
Kommentar zu Skellys wirklich hilfreicher Problemumgehung : In Bootstrap-sass 3.3.6, utilities.scss, Zeile 19:
.pull-left
hatfloat:left !important
. Seitdem empfehle ich,! Important auch in seinem CSS zu verwenden:quelle
Ich bin vor ein paar Tagen auf dieses Problem gestoßen. Ich habe viele Lösungen ausprobiert und keine hat wirklich für mich funktioniert. Am Ende habe ich eine Erweiterung / Überschreibung des Dropdown-Codes von Bootstrap erstellt. Es ist eine Kopie des Originalcodes mit Änderungen an der Funktion closeMenus.
Ich denke, es ist eine gute Lösung, da es die Kernklassen von Bootstrap js nicht beeinflusst.
Sie können es auf gihub überprüfen: https://github.com/djokodonev/bootstrap-multilevel-dropdown
quelle
Ich mache eine andere Lösung für Dropdown. Hoffe das ist hilfreich. Fügen Sie einfach dieses JS-Skript hinzu
quelle