- diperlukan untuk memposisikan konten dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* Konten Dropdown (Hidden secara Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Link didalam dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Ubah warna link dropdown on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Tampilkan menu dropdown (gunakan JS untuk menambahkan kelas ini ke .dropdown-content container ketika pengguna mengklik tombol dropdown) */
.show {display:block;}
Penjelasan Contoh Kami telah memberi style pada tombol dropdown dengan warna background, padding, efek hover, dan lain-lain.
Kelas .dropdown menggunakan position: relative , yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah
tombol dropdown (menggunakan position: absolute ).
Kelas .dropdown-content menyimpan menu dropdown yang sebenarnya. Itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan ubah ini. Tips: Jika Anda ingin lebar konten dropdown menjadi selebar tombol dropdown, setel lebar ke 100% (dan atur overflow: auto untuk mengaktifkan scroll di layar
kecil).
Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lainnya.
Langkah 3) Tambahkan JavaScript Contoh:
/* Saat pengguna mengklik tombol,
toggle antara menyembunyikan dan menampilkan konten dropdown */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Tutup menu dropdown jika pengguna mengeklik di luarnya
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
} Dropdown rata kanan Contoh:
Konten Dropdown Sejajar
Gunakan float: right di kelas dropdown untuk memunculkan menu dropdown ke kanan, dan right:0 pada dropdown-content jika Anda ingin konten dropdown berpindah dari kanan ke kiri.
Contoh:
Menu Dropdown di dalam Bar Navigasi
Klik pada link "Dropdown" untuk melihat menu dropdown.
Cari (Filter) Dropdown Contoh:
Cari/Filter Dropdown
Klik pada tombol untuk membuka menu dropdown, dan gunakan kolom input untuk mencari link dropdown tertentu.
HTML apa yang benar untuk membuat daftar drop down?
Perhatikan pada file menu.
html di atas, untuk
membuat menu
dropdown , element
HTML yang kita gunakan adalah element
Anda pasti tidak asing dengan istilah dropdown menu . Dropdown menu merupakan sebuah elemen kontrol grafis yang memunculkan daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada.