SORU
18 Mart 2012, Pazar


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

Twitter bootstrap elements 2'yi kullanarak multi level açılır menü yapmak mümkün mü? Orijinal versiyonu bu özellik yok.

CEVAP
19 Mart 2012, PAZARTESİ


Cevap Güncelledi

* Güncelleştirilmiş cevap v2 desteği.1.1** bootstrap sürümü stil.

**Ama bu çözüm v3 kaldırıldı, çünkü dikkatli olun

Sadece son bootstrap şimdi varsayılan olarak multi-level açılır listesini desteklediği bu çözüm artık ihtiyacı olmadığını işaret etmek istedim. Hala son (v2.güncellenmiş olanlar için eski sürümleri, ama eğer bunu kullanabilirsiniz 1.Yazma zamanda 1) artık gerekli değildir. İşte güncelleştirilmiş varsayılan düzey çok düz belgelerine açılan bir keman:

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


Orijinal Cevap

Bazı şeyler vardı konular üzerinde alt destek üzerinde github ve onlar genellikle kapalı olarak bootstrap geliştiriciler, gibi this one, o yüzden bence sol geliştiriciler kullanarak önyükleme için bir şeyler. Burada birlikte bir çalışma kesmek nasıl bir araya getirebileceğini gösteren alt menü koymak 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-menu kendi sınıfımdan 2-Seviye menüleri, onları menü öğeleri yanında pozisyon alabiliyoruz bu şekilde açılır uygulamak için yarattı. Ayrıca ok alt grubunun Sol tarafta görüntülemek için değiştirilmiş.

Demo

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BiGSH0TROB

    BiGSH0TROB

    7 NİSAN 2011
  • DanceOn

    DanceOn

    6 Mayıs 2006
  • Study with Substance P

    Study with S

    31 Mayıs 2008