Bootstrap-Dropdown-Untermenü fehlt

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ü

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

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/

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.

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.

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

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

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>