Twitter Bootstrap Multilevel Dropdown-Menü

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.

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

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

Ich habe meine eigene .sub-menuKlasse 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

[Twitter Bootstrap v3]

So erstellen Sie in Twitter Bootstrap v3 ein Dropdown-Menü auf n-Ebene (Touch-Gerät-freundlich):

• jsfiddle-Demo des Dropdown-Menüs n-Level v3.0.0 | v3.1.1 | v3.3.0

CSS:

.dropdown-menu>li /* To prevent selection of text */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu 
{
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JQuery:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

HTML:

<div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a class="trigger right-caret">Level 1</a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Level 2</a></li>
                <li>
                    <a class="trigger right-caret">Level 2</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li>
                            <a class="trigger right-caret">Level 3</a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>

Dieses Beispiel stammt von http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Funktioniert für mich in Bootstrap v3.1.1.

HTML

<div class="container">
<div class="row">
    <h2>Multi level dropdown menu in Bootstrap 3</h2>
    <hr>
    <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
    </div>
</div>

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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

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

Ich konnte das Untermenü, das immer an der Spitze des übergeordneten Menüs steht, aus Andres 'Antwort mit folgendem Zusatz korrigieren:

.dropdown-menu li {
    position: relative;
}

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):

.dropdown-menu li {
    position: relative;

    [class^="icon-"] {
        float: right;
    }

    &:hover {
        // Switch to white icons on hover
        [class^="icon-"] {
            background-image: url("../img/glyphicons-halflings-white.png");
        }
    }
}

Ich habe gerade class="span2"zu den <li>Dropdown-Elementen hinzugefügt und das hat funktioniert.

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.