Menu Dropdown Multilevel Bootstrap Twitter

Jawaban:

113

Jawaban yang Diperbarui

* Jawaban yang diperbarui yang mendukung stylesheet versi bootstrap v2.1.1 **.

** Tapi hati-hati karena solusi ini telah dihapus dari v3

Hanya ingin menunjukkan bahwa solusi ini tidak diperlukan lagi karena bootstrap terbaru sekarang mendukung dropdown multi-level secara default. Anda masih dapat menggunakannya jika Anda menggunakan versi yang lebih lama tetapi bagi mereka yang memperbarui ke yang terbaru (v2.1.1 pada saat penulisan) itu tidak diperlukan lagi. Berikut ini biola dengan dropdown multi-level default yang diperbarui langsung dari dokumentasi:

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

Jawaban Asli

Ada beberapa masalah yang diangkat pada dukungan submenu di github dan biasanya ditutup oleh pengembang bootstrap, seperti yang satu ini , jadi saya pikir itu diserahkan kepada pengembang yang menggunakan bootstrap untuk mengerjakan sesuatu. Berikut adalah demo yang saya kumpulkan menunjukkan kepada Anda bagaimana Anda dapat meretas sub-menu yang berfungsi.

Kode yang relevan

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

Membuat .sub-menukelas saya sendiri untuk diterapkan ke menu tarik-turun 2 tingkat, dengan cara ini kita dapat memposisikannya di sebelah item menu kita. Juga memodifikasi panah untuk menampilkannya di sebelah kiri grup submenu.

Demo

— Andres Ilich
sumber
2
Pada Bootstrap 2.0.4, Anda juga harus memiliki deklarasi "display: block;" di pemilih ".dropdown-menu li: hover .sub-menu".
— Omar
Saya mencoba menerapkannya, submenu pertama berfungsi dengan baik. Tetapi jika saya akan menambahkan submenu lain di menu yang sama, maka ada yang salah. Untuk beberapa alasan itu membuka submenu pertama, bukan yang kedua. Ide atau petunjuk apa pun akan diterima. Sudah terima kasih :)
— Arjan
Hermes - Lihat jawaban saya untuk cara memperbaiki submenu yang menempel.
— Sean Lynch
1
Kannika memobilisasi perbaikan ini akan membutuhkan beberapa markup tambahan dan mungkin beberapa javascript juga. Saya sarankan hanya menampilkan konten dropdown tingkat kedua daripada menyembunyikannya di perangkat seluler untuk menjaga semuanya tetap bersih. Saya akan mencoba mencari solusi di siang hari. Saya belum menguji solusi bootstrap default, jadi jika ada, Anda selalu bisa melakukannya.
— Andres Ilich
5
Versi yang diperbarui hanya berfungsi dengan Bootstrap 2.3.2, itu telah dihapus di Bootstrap 3.0
— seantomburke
34

[Twitter Bootstrap v3]

Untuk membuat menu dropdown n-level (sentuh ramah perangkat) di Twitter Bootstrap v3,

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
sumber
Sayangnya ini tidak menampilkan menu saat tombol 'diciutkan' dari menu ditampilkan. Di Chrome dan FF.
— Ben Power
@BenPower Bisakah Anda memberikan demo jsfiddle, sehingga saya dapat memeriksanya karena demo jsfiddle yang saya berikan berfungsi dengan baik. Juga versi Bootstrap, JQuery dan browser Web yang Anda gunakan?
— Chirayu Chiripal
Ini berfungsi untuk Bootstrap v3.0. Sobat ... Bisakah Anda membuatnya mendukung Bootstrap v2.3.2?
— Niks Jain
1
Saya menambahkan trigger.off('click');sebelum menyetel pendengar untuk mencegah "mendengarkan ganda" ke suatu peristiwa jika inisialisasi javascript dipicu lebih dari sekali.
— FranBran
1
Membalik tanda sisipan menambahkan beberapa baris kode dan tidak perlu.
— Ruben
23

Contoh ini dari http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Bekerja untuk saya di Bootstrap v3.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;
}
— fandasson.dll
sumber
Terimakasih ! versi 3.0 tidak lagi mendukung jawaban yang divalidasi
— Asenar
13

Saya dapat memperbaiki sub-menu yang selalu disematkan ke bagian atas menu induk dari jawaban Andres dengan tambahan berikut:

.dropdown-menu li {
    position: relative;
}

Saya juga menambahkan ikon "icon-chevron-right" pada item yang berisi sub-menu menu, dan mengubah ikon dari hitam menjadi putih saat mengarahkan kursor (untuk melengkapi teks yang berubah menjadi putih dan terlihat lebih baik dengan latar belakang biru yang dipilih).

Berikut adalah perubahan full less / css (ganti yang di atas dengan ini):

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

Saya baru saja menambahkan class="span2"untuk <li>item dropdown dan itu berhasil.

— MISALNYA
sumber
3

Karena Bootstrap 3 menghapus bagian submenu dan kita perlu menyesuaikan diri dengan gayanya, saya pikir lebih baik menggunakan SmartMenu Bootstrap: https://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#

Itu akan menghemat waktu kami di seluler yang responsif dan bergaya.

Plugin ini juga sangat menjanjikan.

— Osify
sumber
Apa pendapatmu tentang github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover ? Saya tidak dapat memutuskan.
— Csaba Toth
1
@CsabaToth, yang ini juga dalam pertimbangan saya, jika Anda hanya ingin memiliki API javascript bootstrap, Anda dapat menggunakan yang ini, cukup ringan untuk ditambahkan dan dapat terbiasa dengan keterampilan bootstrap umum jika Anda memerlukan penyesuaian.
— Osify
Akhirnya saya akan menggunakan salah satunya dalam satu proyek dan yang lainnya di situs pendamping. Setiap solusi lebih cocok untuk salah satunya
— Csaba Toth
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.