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
Jawaban:
Diperbarui 2018
The
dropdown-submenu
telah dihapus di Bootstrap 3 RC. Dalam kata-kata penulis Bootstrap Mark Otto ..Tapi, dengan sedikit CSS ekstra Anda bisa mendapatkan fungsionalitas yang sama.
Bootstrap 4 (submenu navbar saat melayang)
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/71520Berikut adalah contoh yang menggunakan Bootstrap 3.0.0 (final): http://bootply.com/86684
CSS
Markup Sampel
PS - Contoh di navbar yang menyesuaikan posisi kiri: http://bootply.com/92442
sumber
.dropdown-submenu:hover {background: #e2e1e1;}
@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:
JS:
Hasilnya dapat ditemukan pada tema WordPress saya (Atas halaman): http://shprinkone.julienrenaux.fr/
sumber
$(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.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.
sumber
Kode Shprink paling membantu saya, tetapi untuk menghindari dropdown agar tidak ditampilkan, saya memperbaruinya menjadi:
JS:
CSS: FROM background-color: #eeeeee TO background-color: # c5c5c5 - font putih & latar belakang terang tidak terlihat bagus.
Saya harap ini membantu orang sebanyak yang saya lakukan!
Tapi saya harap Bootstrap menambahkan fitur subs kembali ASAP.
sumber
Komentar untuk solusi Skelly yang sangat membantu : di Bootstrap-sass 3.3.6, utilities.scss, baris 19:
.pull-left
milikifloat:left !important
. Karena itu, saya sarankan untuk menggunakan! Penting dalam CSS-nya juga:sumber
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
sumber
Saya membuat solusi lain untuk dropdown. Semoga ini bisa membantu. Cukup tambahkan skrip js ini
sumber