Di bawah ini kita akan mempelajari cara mencari item di menu dropdown dengan CSS dan JavaScript.
Filter Menu Dropdown
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <h2>Search/Filter Dropdown</h2> <p>Klik pada tombol untuk membuka menu dropdown dan gunakan kolom input untuk mencari link dropdown tertentu.</p> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">Tentang</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Kontak</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div> <script> /* Saat pengguna mengklik tombol, beralih antara menyembunyikan dan menampilkan konten dropdown */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html>
Buat Dropdown yang Dapat Diklik
Buat menu dropdown yang muncul saat pengguna mengklik tombol.
Langkah 1) Tambahkan HTML:
Contoh
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">Tentang</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Kontak</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>Penjelasan Kode
Gunakan elemen apa pun untuk membuka menudropdown, mis. elemen <button>, <a> atau <p>
Gunakan elemen kontainer (seperti <div> ) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.
Bungkus elemen <div> di sekitar tombol dan untuk memposisikan menu dropdown dengan benar dengan CSS.
Langkah 2) Tambahkan CSS:
Contoh
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button saat mengarahkan kursor dan fokus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* field search */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
/* field pencarian saat mendapat fokus / diklik */
#myInput:focus {outline: 3px solid #ddd;}
/* kontainer <div> - diperlukan untuk memposisikan konten dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (disembunyikan secara Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Link disamping dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Ubah warna link dropdown saat mengarahkan kursor */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Tampilkan menu dropdown (gunakan JS untuk menambahkan kelas ini ke .dropdown-content container ketika pengguna mengklik tombol dropdown) */
.show {display:block;}Penjelasan Kode
Kita telah memberi style pada tombol dropdown dengan warna background, padding, efek hover, dll.
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 melakukan hover. Perhatikan min-width yang diatur ke 230px. Silakan ubah ini. Tip: Jika ingin lebar konten dropdown menjadi selebar tombol dropdown, setel width ke 100% (dan overflow: auto untuk mengaktifkan scroll di layar kecil).
Field pencarian (#myInput) ditata agar pas di dalam menu dropdown. Kita telah menambahkan ikon pencarian, yang ditempatkan di sebelah kiri di dalam kolom pencarian untuk menunjukkan bahwa ini sebenarnya adalah kolom pencarian.
Langkah 3) Tambahkan JavaScript:
Contoh
/* Saat pengguna mengklik tombol,
beralih antara menyembunyikan dan menampilkan konten dropdown */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
