Bootstrap - Dropdown Demo

Apa itu Dropdown?

Hai teman-teman pengembang web yang bersemangat! Hari ini, kita akan meluncur ke 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 pada saya, setelah tutorial ini selesai, Anda akan membuat dropdown seperti seorang ahli!

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 di sebuah restoran, dan bukannya menu kertas, pelayan memberikan Anda sebuah tombol ajaib. Saat Anda menekannya, daftar makanan lezat muncul mengambang 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, kita perlu mengatur Bootstrap di file HTML kita. Jangan khawatir; itu lebih mudah daripada mengatur ponsel baru!

<!DOCTYPE html>
<html lang="id">
<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 masuk disini -->

<!-- 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 mengatur 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 menampilkan dropdown.
<ul class="dropdown-menu">: Ini adalah daftar yang muncul saat tombol diklik.
<li><a class="dropdown-item" href="#">...: Ini adalah item-item individual dalam daftar dropdown.

Arah Dropdown

Seperti halnya Anda dapat menyajikan makanan dari berbagai arah 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 menaruh garpu Anda!

Item Menu Dropdown

Sekarang, mari kita menambahkan beberapa fitur tambahan ke menu dropdown 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:

Sebuah header (dropdown-header)
Sebuah pemisah (dropdown-divider)
Sebuah item dinonaktifkan (dropdown-item disabled)

Itu seperti membuat section di menu Anda dan memabuat item yang tidak tersedia berwarna abu-abu!

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 menu 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 menu 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 mengontrol dropdown secara program. Berikut adalah tabel metode ini:

Metode	Deskripsi
show	Menampilkan dropdown
hide	Menyembunyikan dropdown
toggle	Mengaktifkan dropdown
update	Memperbarui posisi dropdown elemen
dispose	Menghapus 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()

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

Dan begitu Andapun telah menyelesaikan kursus cepat dalam dropdown Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba elemen ini di situs web Anda sendiri.

Sebelum Anda sadari, 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 Selanjutnya:

Bootstrap - Demo kelompok daftar