Brak menu rozwijanego Bootstrap

Bootstrap 3 wciąż jest w wersji RC, ale właśnie próbowałem go zaimplementować. Nie mogłem wymyślić, jak umieścić klasę podmenu. Nawet nie ma klasy w css i nawet nowe dokumenty nic o tym nie mówią

Było tam w wersji 2.x z nazwą klasy jako podmenu

Zaktualizowano 2018

dropdown-submenuZostała usunięta w Bootstrap 3 RC. Słowami autora Bootstrap, Marka Otto ..

„Podmenu po prostu nie mają teraz zbyt wiele miejsca w sieci, szczególnie mobilnej. Zostaną usunięte w wersji 3.0” - https://github.com/twbs/bootstrap/pull/6342

Ale przy odrobinie dodatkowego CSS możesz uzyskać tę samą funkcjonalność.

Bootstrap 4 (podmenu paska nawigacyjnego po najechaniu kursorem)

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

Wskaż menu rozwijane podmenu paska nawigacyjnego Wskaż menu rozwijane podmenu
paska nawigacyjnego (wyrównane do prawej)
Kliknij menu rozwijane podmenu paska nawigacyjnego (wyrównane do prawej)
Wskaż menu rozwijane paska nawigacyjnego (bez podmenu)

Bootstrap 3

Oto przykład, który używa wersji 3.0 RC 1: http://bootply.com/71520

Oto przykład wykorzystujący Bootstrap 3.0.0 (wersja ostateczna): 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;
}

Próbka znaczników

<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 - Przykład w pasku nawigacyjnym, który dostosowuje lewą pozycję: http://bootply.com/92442

Rozwiązanie @skelly jest dobre, ale nie działa na urządzeniach mobilnych, ponieważ stan najechania nie działa.

Dodałem trochę JS, aby przywrócić zachowanie BS 2.3.2.

PS: będzie działać z CSS, który tam znajdziesz: http://bootply.com/71520, chociaż możesz skomentować następującą część:

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

Wynik można znaleźć w moim motywie WordPress (u góry strony): http://shprinkone.julienrenaux.fr/

Do dzisiaj (9 stycznia 2014 r.) Bootstrap 3 nadal nie obsługuje menu podmenu.

Szukałem w Google responsywnego menu nawigacyjnego i znalazłem to najlepsze.

To inteligentne menu http://www.smartmenus.org/

Mam nadzieję, że jest to wyjście dla każdego, kto chce menu nawigacji z wielopoziomowym podmenu.

aktualizacja 2015-02-17 Inteligentne menu w pełni obsługują styl elementu Bootstrap dla podmenu. Aby uzyskać więcej informacji, odwiedź witrynę Smart menu.

Kod Shprink najbardziej mi pomógł, ale aby uniknąć rozwijania menu poza ekranem, zaktualizowałem go do:

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: OD koloru tła: #eeeeee DO koloru tła: # c5c5c5 - biała czcionka i jasne tło nie wyglądały dobrze.

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

Mam nadzieję, że to pomaga ludziom tak samo jak dla mnie!

Ale mam nadzieję, że Bootstrap ponownie doda funkcję subs z powrotem.

Komentarz do naprawdę pomocnego obejścia Skelly : w Bootstrap-sass 3.3.6, utilities.scss, wiersz 19: .pull-leftma float:left !important. Odtąd polecam używać! Ważne także w jego CSS:

.dropdown-submenu.pull-left {
    float:none !important;
}

Kilka dni temu wpadłem na ten problem. Wypróbowałem wiele rozwiązań i żadne z nich tak naprawdę nie działało dla mnie, ale ostatecznie stworzyłem rozszerzenie / przesłonięcie rozwijanego kodu bootstrap. Jest to kopia oryginalnego kodu ze zmianami w funkcji closeMenus.

Myślę, że to dobre rozwiązanie, ponieważ nie wpływa na podstawowe klasy bootstrap js.

Możesz to sprawdzić na gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Tworzę inne rozwiązanie dla rozwijanego menu. Mam nadzieję, że to jest pomocne. Wystarczy dodać ten skrypt js

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