Cara Membuat Menu Drop-Down Bootstrap

Menu drop-down adalah panel yang memaparkan senarai pilihan, dipaparkan dengan mengklik atau melayang pencetus (butang atau pautan). Membuat menu drop-down bootstrap memerlukan langkah-langkah berikut: Buat bekas dan tambahkan kelas lungsur. Tambah elemen pencetus (butang atau pautan) dan tambah dropdown-toggle dan data-toggle = "dropdown" sifat. Buat senarai yang tidak teratur dan tambahkan kelas menu jatuh. Tambah item senarai yang mengandungi pautan atau kandungan ke senarai.

Panduan Membuat Menu Drop-Down Bootstrap

Apakah menu drop-down?

Menu drop-down adalah komponen interaktif yang memaparkan panel dengan senarai pilihan apabila pengguna mengklik atau melayang.

Bagaimana Membuat Menu Drop-Down Bootstrap?

Untuk membuat menu drop-down, elemen HTML berikut diperlukan:

<li> <div> bekas digunakan untuk membungkus menu drop-down<li> <code><button></button> atau <a></a> elemen sebagai pencetus, dan menu dipaparkan apabila pengguna mengklik atau melayang. <li> <ul></ul> Senarai tidak teratur digunakan untuk memasukkan pilihan menu <li> <li> Item Senarai digunakan untuk mewakili pilihan menu individu

Langkah:

<li> Buat bekas <div> dan tambahkan kelas <code>dropdown .<li> Tambah Elemen Pencetus ( <button></button> atau <a></a> ) di dalam bekas dan tambahkan sifat dropdown-toggle dan data-toggle="dropdown" . <li> Buat senarai yang tidak teratur <ul></ul> dan tambahkan kelas dropdown-menu ke senarai itu. <li> Tambah item Senarai <li> dalam senarai <ul></ul> dan tambahkan pautan atau kandungan lain untuk setiap pilihan.

Contoh kod:

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <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> </ul> </div></code>

Pilihan Lanjutan:

<li> Submenu: Buat submenu menggunakan bersarang <ul></ul> dan <li> elemen. <li> Delimiter: Tambah <li role="separator" class="divider"> untuk memisahkan item menu. <li> Tajuk: Tambah <li role="heading" class="dropdown-header"> untuk membuat tajuk. <li> Lumpuhkan Item: Tambah atribut disabled untuk melumpuhkan item menu.

Petunjuk:

<li> Pastikan elemen pencetus mempunyai aria-haspopup="true" dan aria-expanded="false" sifat untuk aksesibiliti yang lebih baik. <li> Gunakan JavaScript untuk mengendalikan acara menu drop-down (contohnya, tunjukkan/menyembunyikan menu). <li> Ambil kesempatan daripada dokumentasi bootstrap dan contoh komponen untuk penggunaan yang lebih maju.