Bootstrap 4 dropdown bertingkat saat melayang

Ukuran file. 23. Total 7 KBViews. 60000Pembaruan Terakhir. 15/09/2020 12. 11. 00 UTC Tanggal Publikasi. 08/05/2016 05. 03. 31 Situs Resmi UTC. Pergi ke situs web Lisensi. MIT

Table of Contents Show

Bagaimana cara menggunakannya
Bagaimana cara membuat menu dropdown multi level di Bootstrap 4?
Bagaimana saya bisa membuat banyak dropdown di bootstrap?
Bagaimana cara membuat menu tarik-turun yang responsif?
Apa itu dropdown bersarang?

Unduh Demo

Lainnya dalam kategori ini

Lihat Plugin yang Direkomendasikan

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#Menu Turun Bawah

Dropdown On Hover adalah plugin jQuery yang digunakan untuk membuat menu dropdown Bootstrap multi-level yang dipicu oleh hover dengan animasi CSS3 mewah berdasarkan Animate. css

Bagaimana cara menggunakannya

1. Muat Animate yang diperlukan. file plugin css dan jQuery Dropdown On Hover di halaman Bootstrap Anda

<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="bootstrap-dropdownhover.css">
<script src="js/bootstrap-dropdownhover.js"></script>

2. Buat menu dropdown multi-level dari daftar html bersarang seperti ini

<div class="dropdown dropdown-inline">
  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown">
      <a href="#">Another dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu dropdownhover-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#">Another dropdown 2 <span class="caret"></span></a>
      <ul class="dropdown-menu dropdownhover-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown">
          <a href="#">Another dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
  </ul>
</div>

3. Terapkan animasi CSS3 khusus ke menu dropdown multi-level menggunakan atribut 'animasi data'

<a href="#" class="btn btn-primary dropdown-toggle" 
   data-toggle="dropdown" 
   data-hover="dropdown" 
   data-animations="bounceInDown bounceInRight bounceInUp bounceInLeft">
   Dropdown <span class="caret"></span>
</a>

4. Sesuaikan durasi transisi dan arahkan tunda dalam milidetik

Dropdownhover.TRANSITION_DURATION = 300
Dropdownhover.DELAY = 150

Changelog

15-09-2020

v1. 2. 0

15-09-2020

refaktor. jangan tutup menu, jika Anda berpindah antara menu dan sub-menu
memungkinkan Anda menyetel penundaan melayang menggunakan atribut data-dropdown-hover-delay

06-11-2018

acara tetap

06-09-2018

mengkonfigurasi hover-delay

03-07-2018

Masalah Aksesibilitas telah diperbaiki - properti ARIA harus diterapkan saat diarahkan

Plugin jQuery yang luar biasa ini dikembangkan oleh kybarg. Untuk Penggunaan Lanjutan lainnya, silakan periksa halaman demo atau kunjungi situs web resmi

Langkah-langkah membuat menu dropdown navbar bertingkat dengan Bootstrap 4 .

Tambahkan elemen submenu ul li Anda di dalam li induk

Sembunyikan submenu dropdown bagian dalam dengan menambahkan tampilan. tidak ada

Tambahkan posisi. mutlak; . 100%; . -7px;

Tidak, tidak mungkin memiliki dua menu tarik-turun di dalam div yang sama . Mereka harus dipisahkan karena kode untuk mengaktifkannya mencari elemen pertama di div induk dari tombol/anchor. Jadi jika mereka berada di div induk yang sama, hanya div pertama yang akan dialihkan.

Langkah-langkah berikut diperlukan untuk membuat dropdown responsif dengan submenu. .

Buat struktur HTML dasar untuk bilah navigasi

Tambahkan kelas yang diperlukan dalam kode HTML yang akan digunakan untuk penataan di CSS yang diperlukan nanti dalam proses

Tulis HTML untuk membuat item menu dropdown yang responsif

Dropdown bertingkat memungkinkan Anda menampilkan dropdown kedua setelah dropdown pertama dijawab . Ini sangat membantu untuk kasus yang melibatkan respons yang bergantung pada jawaban sebelumnya. (Misalnya, negara, negara bagian, dan kota seseorang).