Bootstrap-Dropdown-Untermenü fehlt

324

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ü

DevC
quelle
2
Denken Sie daran, dass einige Komponenten in Version 3 geändert wurden, einschließlich Menü, Navis und Modalitäten.
Deividi Cavarzan
11
Der Mangel an nativer Unterstützung für diese (imho) nützliche Funktion in BS3 ist einer der Hauptgründe, warum ich noch nicht umgestellt habe. Ich bin damit einverstanden, dass es auf Mobilgeräten nicht so nützlich ist und sie jetzt einen "Mobile First" -Ansatz verfolgen. Es scheint jedoch kurzsichtig, eine bereits implementierte Funktion zu entfernen, die auf dem Desktop SEHR nützlich ist
Andrew Brown
4
Einverstanden, dass es kurzsichtig ist, erwartete Funktionen zu entfernen. Diese Art der bahnbrechenden Veränderung beschert Unternehmensentwicklern einen schlechten Tag.
RJB
Um ein Dropdown zu erstellen, verwenden Sie einfach css codepen.io/Gothburz/pen/GpJKqP
Gothburz

Antworten:

555

Aktualisiert 2018

Das dropdown-submenuwurde in Bootstrap 3 RC entfernt. In den Worten des Bootstrap-Autors Mark Otto ..

"Untermenüs haben momentan nur wenig Platz im Web, insbesondere im mobilen Web. Sie werden mit 3.0 entfernt" - https://github.com/twbs/bootstrap/pull/6342

Mit etwas mehr CSS erhalten Sie jedoch die gleiche Funktionalität.

Bootstrap 4 (Navbar-Untermenü beim Hover)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

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/71520

Hier ist ein Beispiel, das Bootstrap 3.0.0 (final) verwendet: http://bootply.com/86684

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

Beispiel-Markup

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

PS - Beispiel in der Navigationsleiste zum Anpassen der linken Position: http://bootply.com/92442

Zim
quelle
5
Ja, danke, ich habe es zum Stylesheet meines Themas hinzugefügt. Kopieren Sie es einfach aus der alten Version von bootstrap wordpress.org/themes/bikaner
DevC
8
Fügen Sie beispielsweise bootply.com/86684 die folgende Zeile in CSS hinzu , um den korrekten Hintergrund-Hover des übergeordneten .dropdown-submenu:hover {background: #e2e1e1;}
Menüelements
1
Funktioniert auch mit 3.1.1. Vielen Dank für die Lösung. Ich schlug meinen Kopf gegen die Wand und versuchte, die Datei bootstrap.js so zu ändern, dass sie richtig funktioniert.
Joel Kinzel
2
Es geht mir nur darum, die Dinge so weit wie möglich zu vereinfachen, aber dies ist auf großen Websites erforderlich, bei denen mehrere Navigationsebenen (z. B. Regierungswebsites) nicht umgangen werden können.
Troy Templeman
1
Das Untermenü verschwindet, noch bevor ich die Maus darauf bewegen kann, also funktioniert das Schweben nicht! Es schwebt nicht, abhängig vom Klicken, es funktioniert jedoch in Ordnung.
Polv
61

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:

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
  // Avoid following the href location when clicking
  event.preventDefault();
  // Avoid having the menu to close when clicking
  event.stopPropagation();
  // If a menu is already open we close it
  $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
  // opening the one you clicked on
  $(this).parent().addClass('open');
});

Das Ergebnis finden Sie in meinem WordPress-Theme (oben auf der Seite): http://shprinkone.julienrenaux.fr/

Shprink
quelle
5
Sie sind der klügste Kerl in diesem Beitrag
user1143669
2
Diese Lösung berücksichtigt nicht, dass die Hover-Funktionalität auf dem Desktop beibehalten werden soll, und funktioniert auch nicht für die zweite Ebene des Untermenüs. Damit dies für mehr Ebenen von Untermenüs funktioniert, ändern Sie die letzten beiden Zeilen in die folgende Zeile : $(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.
Kanten
Danke für deinen Code. Aber im Handy hat Ihr Code einen Fehler.
Jian Dan
42

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.

vee
quelle
Ich hatte Probleme, Bootstrap auf dem PC zum Schweben zu bringen und auf ein Tablet mit mehreren Ebenen zu klicken. Du hast gerade meinen Tag gemacht! Funktioniert wunderbar - Verwendet so ziemlich das gleiche Markup wie Bootstrap. Vielen Dank! :)
Hippie
2
Diese Lösung ist kostenlos, Open Source und funktioniert sehr gut mit BootStrap 3.
Patrick Desjardins
5
Tolle! Einfach! Spezifische Details zur Bootstrap 3-Integration finden Sie hier: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
Manafire
1
Smartmenus ist nett, funktioniert jedoch nur mit Navigationsleisten, nicht mit einfachen Dropdown-Schaltflächen.
Nikolai Prokoschenko
1
Du hast mein Projekt gespeichert :-)
Sikander
5

Shprinks Code hat mir am meisten geholfen, aber um das Dropdown-Menü außerhalb des Bildschirms zu vermeiden, habe ich ihn aktualisiert auf:

JS:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    } else {
        var newpos = $(this).parent().width();
        menu.css({ left: newpos });
    }

});

CSS: VON Hintergrundfarbe: #eeeeee ZU Hintergrundfarbe: # c5c5c5 - weiße Schrift und heller Hintergrund sahen nicht gut aus.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

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.

WHOMEZz
quelle
4

Kommentar zu Skellys wirklich hilfreicher Problemumgehung : In Bootstrap-sass 3.3.6, utilities.scss, Zeile 19: .pull-lefthat float:left !important. Seitdem empfehle ich,! Important auch in seinem CSS zu verwenden:

.dropdown-submenu.pull-left {
    float:none !important;
}
bencergazda
quelle
2

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

George Donev
quelle
Dies ist eine sehr gute Lösung für mehrstufige Dropdowns, ich benutze sie gerne.
Huncyrus
Ich bin froh, dass es dir gefallen hat :-)
George Donev
-2

Ich mache eine andere Lösung für Dropdown. Hoffe das ist hilfreich. Fügen Sie einfach dieses JS-Skript hinzu

<script type="text/javascript"> jQuery("document").ready(function() {
  jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (jQuery(this).hasClass('open2'))
      jQuery(this).removeClass('open2');
    else {
      jQuery(this).addClass('open2');
    }

  });
}); < /script>

<style type="text/css">.open2{display:block; position:relative;}</style>
user3193801
quelle