Twitter Bootstrap Çok Düzeyli Açılır Menü

89

Twitter bootstrap 2 öğelerini kullanarak çok seviyeli bir açılır menüye sahip olmak mümkün müdür? Orijinal versiyon bu özelliğe sahip değildir.

css  twitter-bootstrap 
— Hellnar
kaynak
aslında bir uygulama aradım ama şansım yaver gitmedi.
— Hellnar
Belki bir suckerfish menüsüne ihtiyacınız var? htmldog.com/articles/suckerfish/dropdowns
— Elaine Marley
1
şuna da bir göz atın: github.com/twitter/bootstrap/issues/424
— Paolo

Yanıtlar:

113

Güncellenen Cevap

* V2.1.1 ** önyükleme sürümü stil sayfasını destekleyen güncellenmiş yanıt.

** Ancak dikkatli olun çünkü bu çözüm v3'ten kaldırılmıştır.

En son önyükleme artık varsayılan olarak çok seviyeli açılır menüleri desteklediği için bu çözüme artık ihtiyaç duyulmadığına işaret etmek istedim. Eski sürümlerdeyseniz yine de kullanabilirsiniz, ancak en son sürüme (yazarken v2.1.1) güncelleme yapanlar için artık buna gerek yoktur. Doğrudan dokümantasyondan güncellenmiş varsayılan çok seviyeli açılır menüye sahip bir keman:

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

Orijinal Cevap

Orada github de üzerinde alt destek üzerinde yükseltilmiş bazı sorunlar olmuştur ve genellikle gibi, önyükleme geliştiriciler tarafından kapatılır bu bir ben iş şeyin dışarı ön yükleme alanı kullanan geliştiriciler bırakılır düşünüyorum böylece. İşte size çalışan bir alt menüyü nasıl bir araya getirebileceğinizi gösteren bir demo.

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

.sub-menu2 seviyeli açılır menülere uygulamak için kendi sınıfımı oluşturdum, bu şekilde onları menü öğelerimizin yanına yerleştirebiliriz. Ayrıca, alt menü grubunun solunda görüntülemek için oku değiştirdi.

Demo

— Andres Ilich
kaynak
2
Bootstrap 2.0.4'ten itibaren, "display: block;" bildirimine de sahip olmalısınız. ".dropdown-menu li: hover .sub-menu" seçicisinde.
— Omar
Uygulamaya çalıştım, ilk alt menü iyi çalışıyor. Ama aynı menüye başka bir alt menü eklersem işler ters gider. Bazı nedenlerden dolayı, ikinci alt menü yerine ilk alt menüyü açar. Herhangi bir fikir veya ipucu memnuniyetle karşılanacaktır. Zaten teşekkürlerx :)
— Arjan
Hermes - Alt menünün yapışmasını nasıl düzelteceğimi öğrenmek için cevabıma bakın.
— Sean Lynch
1
@Kannika'nın bu düzeltmeyi harekete geçirmesi bazı ekstra işaretleme ve muhtemelen biraz da javascript gerektirecektir. Her şeyi temiz tutmak için mobil cihazlarda gizlemek yerine ikinci seviye açılır içeriği görüntülemeyi öneririm. Gün içinde daha sonra bir çözüm üzerinde çalışmaya çalışacağım. Yine de varsayılan önyükleme çözümünü test etmedim, bu yüzden her zaman bununla gidebilirsiniz.
— Andres Ilich
5
Güncellenmiş sürüm yalnızca Bootstrap 2.3.2 ile çalışır, Bootstrap 3.0'da kaldırılmıştır
— seantomburke
34

[Twitter Önyükleme v3]

Twitter Bootstrap v3'te n düzeyinde bir açılır menü oluşturmak için (cihaz dostu dokunun),

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
kaynak
Maalesef bu, menünün 'daraltılmış' düğmesi gösterildiğinde menüyü göstermez. Chrome'da ve FF'de.
— Ben Güç
@BenPower Lütfen bunun bir jsfiddle demosunu sunabilir misiniz, böylece ona bakabilirim çünkü verdiğim jsfiddle demosu iyi çalışıyor. Ayrıca Bootstrap, JQuery ve Web tarayıcılarının hangi sürümlerini kullanıyorsunuz?
— Chirayu Chiripal
Bootstrap v3.0 için çalışıyor. Dostum ... Lütfen Bootstrap v2.3.2'yi destekleyebilir misiniz?
— Niks Jain
1
trigger.off('click');Javascript başlatmanın birden çok kez tetiklenmesi durumunda bir olayı "çift dinlemeyi" önlemek için dinleyicileri ayarlamadan önce ekledim .
— FranBran
1
İmleci ters çevirmek birkaç satır kod ekledi ve gereksizdir.
— Ruben
23

Bu örnek http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 adresinden alınmıştır.

Bootstrap v3.1.1'de benim için çalışıyor.

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
kaynak
Teşekkürler ! 3.0 sürümü artık doğrulanmış yanıtı desteklemiyor
— Asenar
13

Aşağıdaki eklemeyle Andres'in cevabından alt menünün her zaman üst menünün üst kısmına sabitlenmesini düzeltebildim:

.dropdown-menu li {
    position: relative;
}

Ayrıca menü alt menüleri içeren öğelere bir simge "sağ köşeli çift ayraç" ekliyorum ve üzerine gelindiğinde simgeyi siyahtan beyaza değiştiriyorum (metnin beyaza dönüşmesini tamamlamak ve seçilen mavi arka planla daha iyi görünmek için).

İşte tam daha az / css değişikliği (yukarıdakileri bununla değiştirin):

.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
kaynak
4

Sadece eklendi class="span2"için <li>açılan öğeler için ve çalıştı.

— ÖRNEĞİN
kaynak
3

Bootstrap 3 alt menü bölümünü kaldırdığından ve kendimizi stile uyarlamamız gerektiğinden, SmartMenu Bootstrap ile gitmenin daha iyi olacağını düşünüyorum: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

Bu bize mobil uyumlu ve şık bir şekilde zaman kazandırır.

Bu eklenti aynı zamanda çok umut verici.

— Osify
kaynak
— Csaba Toth
1
@CsabaToth, bu da benim düşüncemdeydi, sadece önyükleme javascript API'sine sahip olmak istiyorsanız, bununla gidebilirsiniz, eklemek için yeterince hafif ve herhangi bir özelleştirmeye ihtiyacınız varsa genel önyükleme becerisine aşina olabilirsiniz.
— Osify
Sonunda birini bir projede, diğerini tamamlayıcı bir sitede kullanacağım. Her çözüm bunlardan birine daha iyi uyuyor
— Csaba Toth
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.