Bootstrap açılır menüsü eksik

Bootstrap 3 hala RC'de, ama ben sadece uygulamaya çalışıyordum. Alt menü sınıfını nasıl koyacağımı anlayamadım. Css'de sınıf bile yok ve yeni dokümanlar bile bu konuda bir şey söylemiyor

Açılan alt menü olarak sınıf adıyla 2.x'teydi

Güncelleme 2018

dropdown-submenuBootstrap 3 RC kaldırılmıştır. Bootstrap yazarı Mark Otto'nun sözleriyle ..

"Alt menülerin şu anda web'de çok fazla yeri yok, özellikle mobil web. 3.0 ile kaldırılacaklar" - https://github.com/twbs/bootstrap/pull/6342

Ancak, biraz ekstra CSS ile aynı işlevselliği elde edebilirsiniz.

Bootstrap 4 (fareyle üzerine gelindiğinde navbar alt menüsü)

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

Navbar'ı alt açılan vurgulu
Navbar'ı alt açılır vurgulu (sağ hizalanmış)
Navbar'ı alt açılan tıklayın (sağ hizalanmış)
Navbar'ı açılan vurgulu (hayır alt menüsü)

Önyükleme 3

3.0 RC 1 kullanan bir örnek: http://bootply.com/71520

Bootstrap 3.0.0 (final) kullanan bir örnek: 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;
}

Örnek İşaretleme

<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 - Navbar'daki sol konumu ayarlayan örnek: http://bootply.com/92442

@skelly çözümü iyidir ancak fareyle üzerine gelme durumu çalışmadığından mobil cihazlarda çalışmaz.

BS 2.3.2 davranışını geri almak için biraz JS ekledim.

Not: Aşağıdaki bölüme yorum yapabileceğiniz halde, oraya ulaştığınız CSS ile çalışacaktır: http://bootply.com/71520

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

Sonuç WordPress temamda bulunabilir (Sayfanın başı): http://shprinkone.julienrenaux.fr/

Bugüne kadar (9 Ocak 2014) Bootstrap 3 hala alt menü açılır menüsünü desteklemiyor.

Google'a duyarlı gezinme menüsü hakkında arama yaptım ve bunun en iyisi olduğunu gördüm.

Öyle Akıllı menüleri http://www.smartmenus.org/

Bu çok düzeyli alt menü ile navigasyon menüsü isteyen herkes için bir çıkış yolu olduğunu umuyorum.

update 2015-02-17 Akıllı menüler artık alt menü için Bootstrap öğesi stilini tam olarak destekliyor. Daha fazla bilgi için lütfen Akıllı menüler web sitesine bakın.

Shprink'in kodu bana en çok yardımcı oldu, ancak ekrandan çıkmak için açılır listeden kaçınmak için bunu güncelledim:

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: FROM background-color: #eeeeee TO background-color: # c5c5c5 - beyaz yazı tipi ve açık renkli iyi görünmüyordu.

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

Umarım bu insanlara benim için olduğu kadar yardımcı olur!

Ama ben Bootstrap en kısa sürede subs özelliği eklemek umuyoruz.

Skelly'nin gerçekten faydalı geçici çözümüne yorum yapın : Bootstrap-sass 3.3.6, utilities.scss, satır 19: .pull-leftvardır float:left !important. O zamandan beri, onun CSS'sinde de!

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

Birkaç gün önce bu sorunla karşılaştım. Birçok çözüm denedim ve hiçbiri gerçekten benim için işe yaramadı sonunda bootstrap açılır kodunun bir uzatma / geçersiz kılma oluşturdu. Orijinal kodun closeMenus işlevinde yapılan değişikliklerin bir kopyasıdır.

Bootstrap js çekirdek sınıflarını etkilemediğinden iyi bir çözüm olduğunu düşünüyorum.

Bunu gihub'da kontrol edebilirsiniz: https://github.com/djokodonev/bootstrap-multilevel-dropdown

Açılır menü için başka bir çözüm daha yapıyorum. Umarım bu yardımcı olur Sadece bu js betiğini ekleyin

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