Menu Dropdown Multilevel Bootstrap Twitter

Question 1

Apakah mungkin memiliki menu dropdown multi level dengan menggunakan elemen twitter bootstrap 2? Versi asli tidak memiliki fitur ini.

Question 2

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

Question 3

[Twitter Bootstrap v3]

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

jsfiddle-demo dari menu dropdown tingkat-n v3.0.0 | v3.1.1 | v3.3.0

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>

Question 4

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

Question 5

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

Question 6

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

Question 7

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.

Answer 1

89

Apakah mungkin memiliki menu dropdown multi level dengan menggunakan elemen twitter bootstrap 2? Versi asli tidak memiliki fitur ini.

css twitter-bootstrap Hellnar
sumber

sebenarnya mencari implementasi tetapi saya tidak beruntung dengannya.

Hellnar

Mungkin Anda membutuhkan menu ikan pengisap? htmldog.com/articles/suckerfish/dropdowns

Elaine Marley

1

lihat ini juga: github.com/twitter/bootstrap/issues/424

Paolo

Answer 2

sebenarnya mencari implementasi tetapi saya tidak beruntung dengannya.

Hellnar

Answer 3

Mungkin Anda membutuhkan menu ikan pengisap? htmldog.com/articles/suckerfish/dropdowns

Elaine Marley

Answer 4

1

lihat ini juga: github.com/twitter/bootstrap/issues/424

Paolo

Answer 5

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

Answer 6

2

Pada Bootstrap 2.0.4, Anda juga harus memiliki deklarasi "display: block;" di pemilih ".dropdown-menu li: hover .sub-menu".

Omar

Answer 7

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

Answer 8

Hermes - Lihat jawaban saya untuk cara memperbaiki submenu yang menempel.

Sean Lynch

Answer 9

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

Answer 10

5

Versi yang diperbarui hanya berfungsi dengan Bootstrap 2.3.2, itu telah dihapus di Bootstrap 3.0

seantomburke

Answer 11

[Twitter Bootstrap v3]

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

jsfiddle-demo dari menu dropdown tingkat-n v3.0.0 | v3.1.1 | v3.3.0

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>

Answer 12

Sayangnya ini tidak menampilkan menu saat tombol 'diciutkan' dari menu ditampilkan. Di Chrome dan FF.

Ben Power

Answer 13

@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

Answer 14

Ini berfungsi untuk Bootstrap v3.0. Sobat ... Bisakah Anda membuatnya mendukung Bootstrap v2.3.2?

Niks Jain

Answer 15

1

Saya menambahkan trigger.off('click');sebelum menyetel pendengar untuk mencegah "mendengarkan ganda" ke suatu peristiwa jika inisialisasi javascript dipicu lebih dari sekali.

FranBran

Answer 16

1

Membalik tanda sisipan menambahkan beberapa baris kode dan tidak perlu.

Ruben

Answer 17

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

Answer 18

Terimakasih ! versi 3.0 tidak lagi mendukung jawaban yang divalidasi

Asenar

Answer 19

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

Answer 20

4

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

MISALNYA
sumber

Answer 21

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

Answer 22

Apa pendapatmu tentang github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover ? Saya tidak dapat memutuskan.

Csaba Toth

Answer 23

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

Answer 24

Akhirnya saya akan menggunakan salah satunya dalam satu proyek dan yang lainnya di situs pendamping. Setiap solusi lebih cocok untuk salah satunya

Csaba Toth

Menu Dropdown Multilevel Bootstrap Twitter

Jawaban:

HTML

CSS