Bootstrap - Dropdown Demo

Apa itu Dropdown?

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menakjubkan dari dropdown Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis baris kode sebelumnya. Percayakan saya, setelah tutorial ini selesai, Anda akan membuat dropdown seperti seorang pro!

Bootstrap - Dropdowns Demo

Dropdown adalah elemen antarmuka pengguna yang memungkinkan pengguna untuk memilih satu opsi dari daftar item. Itu seperti menu digital yang muncul saat Anda mengklik tombol atau tautan. Bayangkan Anda berada di restoran, dan bukannya menu kertas, pelayan memberikan Anda tombol ajaib. Saat Anda menekannya, daftar makanan lezat muncul berambang di udara. Itu sebenarnya apa yang dilakukan dropdown di halaman web!

Mengapa Menggunakan Dropdown?

Dropdown sangat berguna untuk:

Menyimpan ruang di halaman web Anda
Mengatur opsi yang berkaitan
Menyediakan antarmuka pengguna yang bersih dan intuitif

Sekarang, mari kita merusak sesuatu dengan kode!

Menyiapkan Bootstrap

Sebelum kita membuat dropdown pertama, kita perlu mengatur Bootstrap di file HTML kita. Jangan khawatir; itu lebih mudah daripada mengatur smartphone baru!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Dropdown Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten Anda akan ditempatkan di sini -->

<!-- Bootstrap JS dan Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Kode ini menyiapkan struktur HTML dasar dan menyertakan file Bootstrap yang diperlukan. Pahami ini seperti menyiapkan dapur sebelum Anda mulai memasak!

Membuat Dropdown Dasar

mari kita mulai dengan dropdown sederhana. Kita akan membuat tombol yang, saat diklik, akan menampilkan daftar opsi.

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Pilih buah
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Apel</a></li>
<li><a class="dropdown-item" href="#">Pisang</a></li>
<li><a class="dropdown-item" href="#">Ceri</a></li>
</ul>
</div>

mari kitauraikan ini:

<div class="dropdown">: Ini adalah wadah untuk dropdown kita.
<button class="btn btn-primary dropdown-toggle" ...>: Ini membuat tombol yang pengguna klik untuk membuka dropdown.
data-bs-toggle="dropdown": Ini memberitahu Bootstrap bahwa tombol ini harus menunggang dropdown.
<ul class="dropdown-menu">: Ini adalah daftar yang muncul saat tombol diklik.
<li><a class="dropdown-item" href="#">...: Ini adalah item-item individual di dalam daftar dropdown.

Arah Dropdown

Seperti halnya Anda dapat menyajikan makanan dari arah yang berbeda di buffet, Bootstrap memungkinkan Anda untuk mengubah arah dropdown Anda. mari kita jelajahi beberapa opsi:

Dropup

<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Perbedaan satu-satunya di sini adalah kelas dropup instead of dropdown. Itu seperti membalik menu Anda ke atas!

Dropright dan Dropleft

<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Gunakan dropend untuk dropdown yang berorientasi ke kanan dan dropstart untuk dropdown yang berorientasi ke kiri. Itu seperti memilih sisi piring untuk menempatkan garpu Anda!

Item Dropdown

Sekarang, mari kita menambahkan beberapa fitur tambahan ke dropdown menu kita:

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Header dropdown</h6></li>
<li><a class="dropdown-item" href="#">Aksi</a></li>
<li><a class="dropdown-item" href="#">Aksi lainnya</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Aksi dinonaktifkan</a></li>
</ul>
</div>

Dalam contoh ini, kita telah menambahkan:

Header (dropdown-header)
Pemisah (dropdown-divider)
Item dinonaktifkan (dropdown-item disabled)

Itu seperti membuat section di menu Anda dan memabukkan item yang tidak tersedia!

Ukuran Dropdown

Seperti halnya Anda dapat memesan minuman dalam ukuran kecil, medium, atau besar, Anda dapat mengubah ukuran tombol dropdown Anda:

<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Tombol besar
</button>
<ul class="dropdown-menu">
<!-- Item dropdown -->
</ul>
</div>

<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Tombol kecil
</button>
<ul class="dropdown-menu">
<!-- Item dropdown -->
</ul>
</div>

Gunakan btn-lg untuk tombol besar dan btn-sm untuk tombol kecil. Itu sangat mudah!

Metode Dropdown

Bootstrap menyediakan beberapa metode untuk mengendalikan dropdown secara program. Berikut adalah tabel metode ini:

Metode	Deskripsi
show	Menampilkan dropdown
hide	Menyembunyikan dropdown
toggle	Menunggang dropdown
update	Memperbarui posisi dropdown elemen
dispose	Menghancurkan dropdown elemen

Untuk menggunakan metode ini, Anda dapat menggunakan JavaScript. Misalnya:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})

// Menampilkan dropdown
dropdownList[0].show()

// Menyembunyikan dropdown
dropdownList[0].hide()

// Menunggang dropdown
dropdownList[0].toggle()

Dan itu saja! Anda baru saja menyelesaikan kursus singkat dalam dropdown Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba elemen ini di situs web Anda sendiri.

Sebelum Anda tahu, Anda akan membuat dropdown menu yang membuat restoran termewah iri. Selamat coding, dan semoga dropdown Anda selalu jatuh ke arah yang benar!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Demos Sidebar

Tutorial Seterusnya:

Bootstrap - Demo kumpulan senarai