Twitter Bootstrap Multilevel Dropdown-Menü

89

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.

Hellnar
quelle
suchte tatsächlich nach einer Implementierung, aber ich hatte kein Glück damit.
Hellnar
Vielleicht brauchen Sie ein Suckerfish-Menü? htmldog.com/articles/suckerfish/dropdowns
Elaine Marley
1
Schauen Sie sich auch das an: github.com/twitter/bootstrap/issues/424
Paolo

Antworten:

113

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

Andres Ilich
quelle
2
Ab einem Bootstrap 2.0.4 muss auch die Deklaration "display: block;" im Selektor ".dropdown-menu li: hover .sub-menu".
Omar
Ich habe versucht, es zu implementieren, das erste Untermenü funktioniert gut. Aber wenn ich im selben Menü ein weiteres Untermenü hinzufüge, geht etwas schief. Aus irgendeinem Grund wird das erste Untermenü anstelle des zweiten geöffnet. Jede Idee oder jeder Hinweis wäre willkommen. Schon danke :)
Arjan
Hermes - In meiner Antwort erfahren Sie, wie Sie das Anhaften des Untermenüs beheben können.
Sean Lynch
1
@Kannika, um dieses Update zu mobilisieren, würde ein zusätzliches Markup und wahrscheinlich auch etwas Javascript erfordern. Ich schlage vor, nur den Dropdown-Inhalt der zweiten Ebene anzuzeigen, anstatt ihn auf Mobilgeräten auszublenden, um die Dinge sauber zu halten. Ich werde später am Tag versuchen, an einer Lösung zu arbeiten. Ich habe die Standard-Bootstrap-Lösung jedoch nicht getestet. Wenn überhaupt, können Sie immer damit anfangen.
Andres Ilich
5
Die aktualisierte Version funktioniert nur mit Bootstrap 2.3.2, sie wurde in Bootstrap 3.0
seantomburke
34

[Twitter Bootstrap v3]

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

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>
Chirayu Chiripal
quelle
Leider wird das Menü nicht angezeigt, wenn die Schaltfläche "Reduziert" des Menüs angezeigt wird. In Chrome und in FF.
Ben Power
@ BenPower Kannst du bitte eine jsfiddle-Demo davon bereitstellen, damit ich sie mir ansehen kann, da die von mir gegebene jsfiddle-Demo gut funktioniert? Welche Versionen von Bootstrap-, JQuery- und Webbrowsern verwenden Sie?
Chirayu Chiripal
Es funktioniert für Bootstrap v3.0. Buddy ... Könnten Sie bitte Bootstrap v2.3.2 unterstützen?
Niks Jain
1
Ich habe 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.
FranBran
1
Das Invertieren des Carets fügte mehrere Codezeilen hinzu und ist nicht erforderlich.
Ruben
23

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;
}
Fandasson
quelle
Danke ! Die Version 3.0 unterstützt die validierte Antwort nicht mehr
Asenar
13

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");
        }
    }
}
Sean Lynch
quelle
4

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

Z.B
quelle
3

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.

Osify
quelle
Was ist Ihre Meinung zu github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover ? Ich kann mich nicht entscheiden.
Csaba Toth
1
@CsabaToth, dies war auch in meiner Überlegung, wenn Sie nur die Bootstrap-Javascript-API haben möchten, können Sie diese verwenden, die leicht genug ist, um sie hinzuzufügen, und Sie können mit allgemeinen Bootstrap-Fähigkeiten vertraut sein, wenn Sie Anpassungen benötigen.
Osify
Schließlich werde ich einen von ihnen in einem Projekt und den anderen in einer Companion-Site verwenden. Jede Lösung passt besser zu einer von ihnen
Csaba Toth