Wielopoziomowe menu rozwijane Twitter Bootstrap

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

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

[Twitter Bootstrap v3]

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

• jsfiddle-demo n-poziomowego menu rozwijanego v3.0.0 | wersja 3.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>

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

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

Właśnie dodałem class="span2"do <li>listy rozwijanej i zadziałało.

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.