Sub menu drop-down Bootstrap hilang

324

Bootstrap 3 masih di RC, tetapi saya hanya mencoba mengimplementasikannya. Saya tidak tahu bagaimana cara menempatkan kelas sub menu. Bahkan tidak ada kelas dalam css dan bahkan dokumen baru tidak mengatakan apa-apa tentang itu

Itu ada di 2.x dengan nama kelas sebagai dropdown-submenu

DevC
sumber
2
Ingatlah bahwa beberapa komponen telah berubah di versi 3, termasuk menu, navs dan modals.
Deividi Cavarzan
11
kurangnya dukungan asli untuk fitur (imho) yang berguna di BS3 ini adalah salah satu alasan utama saya belum beralih. sementara saya setuju itu tidak berguna di ponsel, dan mereka memiliki pendekatan 'mobile first' sekarang, tampaknya picik untuk menghapus fitur yang sudah mereka terapkan, yang SANGAT berguna di desktop
Andrew Brown
4
Setuju bahwa itu rabun dekat untuk menghapus fungsionalitas yang diharapkan. Jenis perubahan seperti ini memberikan hari yang buruk bagi pengembang perusahaan.
RJB
Untuk membuat dropdown cukup gunakan css codepen.io/Gothburz/pen/GpJKqP
Gothburz

Jawaban:

555

Diperbarui 2018

The dropdown-submenutelah dihapus di Bootstrap 3 RC. Dalam kata-kata penulis Bootstrap Mark Otto ..

"Submenu tidak memiliki banyak tempat di web saat ini, terutama web seluler. Mereka akan dihapus dengan 3.0" - https://github.com/twbs/bootstrap/pull/6342

Tapi, dengan sedikit CSS ekstra Anda bisa mendapatkan fungsionalitas yang sama.

Bootstrap 4 (submenu navbar saat melayang)

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

Sub-menu Navbar dropdown melayang-layang
Navbar submenu drop-down melayang-layang (kanan disejajarkan)
Navbar klik submenu drop-down (rata kanan)
Navbar drop-down melayang-layang (tidak ada submenu)


Bootstrap 3

Berikut adalah contoh yang menggunakan 3.0 RC 1: http://bootply.com/71520

Berikut adalah contoh yang menggunakan Bootstrap 3.0.0 (final): 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;
}

Markup Sampel

<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 - Contoh di navbar yang menyesuaikan posisi kiri: http://bootply.com/92442

Zim
sumber
5
Ya Terima kasih, saya telah menambahkannya stylesheet tema saya, cukup salin disisipkan dari versi lama dari bootstrap wordpress.org/themes/bikaner
DevC
8
Misalnya bootply.com/86684 , tambahkan baris berikut di css untuk latar belakang yang benar dari item menu induk saat menampilkan submenu: .dropdown-submenu:hover {background: #e2e1e1;}
Eduardo Moralles
1
Bekerja dengan 3.1.1 juga. Terima kasih banyak atas solusinya. Saya membenturkan kepala ke dinding mencoba mengubah file bootstrap.js agar berfungsi dengan baik.
Joel Kinzel
2
Saya semua tentang mencoba menyederhanakan hal-hal sebanyak mungkin tetapi ada kebutuhan untuk ini di situs web besar tanpa jalan di berbagai tingkat navigasi (seperti situs web pemerintah).
Troy Templeman
1
Submenu menghilang bahkan sebelum saya bisa memindahkan mouse ke sana, jadi melayang tidak berfungsi! Itu tidak melayang, bergantung pada klik, itu berfungsi OK.
Polv
61

@skelly solusi bagus tetapi tidak akan berfungsi pada perangkat seluler karena keadaan hover tidak akan berfungsi.

Saya telah menambahkan sedikit JS untuk mendapatkan kembali perilaku BS 2.3.2.

PS: itu akan bekerja dengan CSS Anda sampai di sana: http://bootply.com/71520 meskipun Anda dapat mengomentari bagian berikut:

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

Hasilnya dapat ditemukan pada tema WordPress saya (Atas halaman): http://shprinkone.julienrenaux.fr/

Shprink
sumber
5
Anda adalah orang paling cerdas di pos ini
user1143669
2
Solusi ini tidak memperhitungkan keinginan untuk menjaga fungsi melayang ketika di desktop dan juga tidak berfungsi untuk submenu tingkat kedua. Agar ini berfungsi untuk lebih banyak tingkat submenu, ubah dua baris terakhir ke baris berikut:, $(this).closest(".dropdown-submenu").toggleClass("open");yang akan membuka / menutup item menu tautan. Untuk menjaga kursor pada desktop, cek pada lebar viewport browser diperlukan dan akan berbeda untuk setiap situs.
edhedges
terima kasih untuk kodenya. tetapi di ponsel kode Anda memiliki bug.
jian dan
42

Hingga hari ini (9 Januari 2014) Bootstrap 3 masih belum mendukung dropdown sub menu.

Saya mencari Google tentang menu navigasi responsif dan menemukan ini adalah yang terbaik.

Ini adalah menu Smart http://www.smartmenus.org/

Saya harap ini jalan keluar bagi siapa saja yang menginginkan menu navigasi dengan sub menu bertingkat.

pembaruan 2015-02-17 Menu cerdas sekarang sepenuhnya mendukung gaya elemen Bootstrap untuk submenu. Untuk informasi lebih lanjut silakan lihat situs web menu Smart.

vee
sumber
Saya mengalami masalah saat mencoba menjalankan bootstrap di PC, dan mengklik tablet dengan berbagai tingkatan. Kau mencerahkan hariku! Bekerja dengan indah - Menggunakan markup yang hampir sama dengan bootstrap. Terima kasih! :)
Hippie
2
Solusi ini gratis, open source, dan bekerja dengan sangat baik dengan BootStrap 3.
Patrick Desjardins
5
Luar biasa! Mudah! Untuk detail spesifik tentang integrasi Bootstrap 3, lihat di sini: vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html
manafire
1
Smartmenus bagus, tetapi hanya bekerja dengan navbars, tidak dengan dropdown tombol sederhana.
Nikolai Prokoschenko
1
u menyelamatkan proyek saya :-)
Sikander
5

Kode Shprink paling membantu saya, tetapi untuk menghindari dropdown agar tidak ditampilkan, saya memperbaruinya menjadi:

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 - font putih & latar belakang terang tidak terlihat bagus.

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

Saya harap ini membantu orang sebanyak yang saya lakukan!

Tapi saya harap Bootstrap menambahkan fitur subs kembali ASAP.

WHOMEZz
sumber
4

Komentar untuk solusi Skelly yang sangat membantu : di Bootstrap-sass 3.3.6, utilities.scss, baris 19: .pull-leftmiliki float:left !important. Karena itu, saya sarankan untuk menggunakan! Penting dalam CSS-nya juga:

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

Saya mengalami masalah ini beberapa hari yang lalu. Saya mencoba banyak solusi dan tidak ada yang benar-benar bekerja untuk saya pada akhirnya saya akhirnya membuat extenion / override dari kode dropdown bootstrap. Ini adalah salinan kode asli dengan perubahan pada fungsi closeMenus.

Saya pikir ini adalah solusi yang baik karena tidak mempengaruhi kelas inti dari js bootstrap.

Anda dapat memeriksanya di gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

George Donev
sumber
Ini adalah solusi yang sangat bagus untuk dropdown multilevel, saya suka menggunakannya.
huncyrus
Saya senang Anda menyukainya :-)
George Donev
-2

Saya membuat solusi lain untuk dropdown. Semoga ini bisa membantu. Cukup tambahkan skrip js ini

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