Wielopoziomowe menu rozwijane Twitter Bootstrap

89

Czy możliwe jest posiadanie wielopoziomowego menu rozwijanego, używając elementów Twittera Bootstrap 2? Oryginalna wersja nie ma tej funkcji.

css  twitter-bootstrap 
— Hellnar
źródło
faktycznie szukałem implementacji, ale nie miałem z nią szczęścia.
— Hellnar
Może potrzebujesz menu z suckerfish? htmldog.com/articles/suckerfish/dropdowns
— Elaine Marley
1
— Paolo

Odpowiedzi:

113

Zaktualizowana odpowiedź

* Zaktualizowana odpowiedź, która obsługuje arkusz stylów wersji v2.1.1 ** bootstrap.

** Ale uważaj, ponieważ to rozwiązanie zostało usunięte z wersji v3

Chciałem tylko zwrócić uwagę, że to rozwiązanie nie jest już potrzebne, ponieważ najnowszy program ładujący domyślnie obsługuje teraz wielopoziomowe menu rozwijane. Nadal możesz go używać, jeśli korzystasz ze starszych wersji, ale dla tych, którzy zaktualizowali do najnowszej (v2.1.1 w momencie pisania), nie jest już potrzebny. Oto skrzypce ze zaktualizowanym domyślnym, wielopoziomowym menu rozwijanym bezpośrednio z dokumentacji:

http://jsfiddle.net/2Smgv/2858/

Oryginalna odpowiedź

Pojawiły się pewne problemy dotyczące obsługi podmenu na githubie i zazwyczaj są one zamykane przez programistów bootstrap, tak jak ten , więc myślę, że to deweloperom używającym bootstrapu pozostawiono rozwiązanie. Oto demo, które stworzyłem, pokazujące, jak możesz zhakować działające podmenu.

Odpowiedni kod

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

Stworzyłem własną .sub-menuklasę do zastosowania w dwupoziomowych menu rozwijanych, dzięki czemu możemy je umieszczać obok pozycji menu. Zmodyfikowano także strzałkę, aby wyświetlić ją po lewej stronie grupy podmenu.

Próbny

— Andres Ilich
źródło
2
Od wersji Bootstrap 2.0.4 musisz mieć również deklarację „display: block;” w selektorze ".dropdown-menu li: hover .sub-menu".
— Omar
Próbowałem to zaimplementować, pierwsze podmenu działa dobrze. Ale jeśli dodam kolejne podmenu w tym samym menu, coś pójdzie nie tak. Z jakiegoś powodu otwiera pierwsze podmenu zamiast drugiego. Każdy pomysł lub wskazówki byłyby mile widziane. Już dziękuję :)
— Arjan
Hermes - Zobacz moją odpowiedź, jak naprawić sklejanie się podmenu.
— Sean Lynch
1
@Kannika mobilizacja tej poprawki wymagałaby dodatkowych znaczników i prawdopodobnie również javascript. Proponuję po prostu wyświetlać zawartość listy rozwijanej drugiego poziomu zamiast ukrywać ją na urządzeniach mobilnych, aby zachować porządek. Spróbuję popracować nad rozwiązaniem później w ciągu dnia. Nie testowałem jednak domyślnego rozwiązania bootstrap, więc jeśli cokolwiek, zawsze możesz to zrobić.
— Andres Ilich
5
Zaktualizowana wersja działa tylko z Bootstrap 2.3.2, została usunięta w Bootstrap 3.0
— seantomburke
34

[Twitter Bootstrap v3]

Aby utworzyć n-poziomowe menu rozwijane (przyjazne dla urządzeń dotykowych) w Twitter Bootstrap v3,

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
źródło
Niestety nie pokazuje to menu, gdy jest widoczny przycisk „zwiniętego” menu. W Chrome i FF.
— Ben Power
@BenPower Czy możesz udostępnić demo jsfiddle, abym mógł się temu przyjrzeć, ponieważ pokazane przeze mnie demo jsfiddle działa dobrze. Również jakich wersji Bootstrap, JQuery i przeglądarek internetowych używasz?
— Chirayu Chiripal
Działa dla Bootstrap v3.0. Kolego ... Czy mógłbyś sprawić, że będzie obsługiwał Bootstrap v2.3.2?
— Niks Jain,
1
Dodałem trigger.off('click');przed ustawieniem słuchaczy, aby zapobiec "podwójnemu nasłuchiwaniu" zdarzenia w przypadku, gdy inicjalizacja javascript jest uruchamiana więcej niż raz.
— FranBran
1
Odwrócenie karetki powoduje dodanie kilku wierszy kodu i jest niepotrzebne.
— Ruben
23

Ten przykład pochodzi z http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

U mnie działa w Bootstrap 3.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
źródło
Dzięki Ci ! wersja 3.0 nie obsługuje już zweryfikowanej odpowiedzi
— Asenar
13

Udało mi się naprawić podmenu zawsze przypinane na górze menu nadrzędnego z odpowiedzi Andresa z następującym dodatkiem:

.dropdown-menu li {
    position: relative;
}

Dodam również ikonę „icon-chevron-right” na elementach zawierających podmenu menu i zmieniam ikonę z czarnej na białą po najechaniu myszą (aby uzupełnić tekst zmieniający się na biały i lepiej wyglądać z wybranym niebieskim tłem).

Oto pełna zmiana less / css (zamień powyższe na to):

.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
źródło
3

Ponieważ Bootstrap 3 usunął część podmenu i musimy dostosować styl, myślę, że lepiej jest wybrać SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

To zaoszczędziłoby nam czasu na responsywność i styl na urządzeniach mobilnych.

Ta wtyczka również bardzo obiecująca.

— Osify
źródło
Jaka jest Twoja opinia na temat github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover ? Nie mogę się zdecydować.
— Csaba Toth
1
@CsabaToth, ten również był moim rozważaniem, jeśli chcesz mieć tylko bootstrap javascript API, możesz wybrać ten, wystarczająco lekki, aby go dodać i możesz znać ogólne umiejętności bootstrap, jeśli potrzebujesz dostosowania.
— Osify
Wreszcie zamierzam użyć jednego z nich w jednym projekcie, a drugiego w witrynie towarzyszącej. Każde rozwiązanie lepiej pasuje do jednego z nich
— Csaba Toth
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.