Cara mencari/pilih menu dropdown

Belajar cara menggunakan CSS dan JavaScript untuk mencari item di menu dropdown.

Buat menu dropdown yang dapat di klik

Buat menu dropdown yang muncul saat pengguna mengeklik tombol.

Langkah pertama - Tambahkan HTML:

<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">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

Pengertian contoh:

Bisa digunakan elemen apapun untuk membuka menu dropdown, seperti tombol <button>, elemen <a> atau <p>.

Gunakan elemen wadah (seperti <div>) untuk membuat menu dropdown, dan tambahkan tautan menu dropdown didalamnya.

Gunakan elemen <div> untuk melingkapi tombol dan <div> lainnya, untuk memastikan menu dropdown dapat ditempatkan dengan benar menggunakan CSS.

Kedua langkah - Tambahkan CSS:

/* Dropdown menu button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Tombol menu dropdown saat mouse berada di atas/fokus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Bidang pencarian */
#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;
}
/* Ketika kotak pencarian mendapatkan fokus/diklik */
#myInput:focus {outline: 3px solid #ddd;}
/* Kontainer <div> - digunakan untuk menempatkan konten menu dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Konten menu dropdown (secara default tersembunyi) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Link di dalam menu dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Mengubah warna tinta link saat mouse berada di atas menu dropdown */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Menampilkan menu dropdown (ketika pengguna mengklik tombol menu dropdown, gunakan JS untuk menambahkan kelas ini ke kontainer .dropdown-content) */
.show {display:block;}

Pengertian contoh:

Kami telah menyajikan gaya tombol menu turun, termasuk warna latar, margin dalam, efek hover, dll.

.dropdown kelas yang digunakan position:relativekarena kami ingin konten turun dapat berada tepat di bawah tombol menu turun (dengan menggunakan position:absolute penerapan).

.dropdown-content kelas yang mengandung menu turun yang sebenarnya. Secara default, itu tersembunyi dan akan muncul saat dihover (lihat di bawah). Perhatian,min-width diatur menjadi 230px. Anda dapat mengubahnya sesuai kebutuhan. Tips: Jika Anda ingin lebar konten turun sama dengan tombol menu turun, maka Anda dapat mengatur width Dise팡kan dengan 100%（dan overflow Dise팡kan dengan auto, untuk mengaktifkan guling di layar kecil).

Kotak pencarian (#myInput) sudah disajikan gaya untuk menyesuaikan diri dengan menu turun. Kami telah menambahkan ikon pencarian, yang berada di sebelah kiri kotak pencarian, untuk menunjukkan bahwa ini adalah kotak pencarian.

Tahap ketiga - Tambahkan JavaScript:

/* Saat pengguna menekan tombol, berpindah antara menyembunyikan dan menampilkan konten turun */
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";
    }
  }
}

Coba sendiri

Halaman yang berhubungan

Panduan:Menu tarik turun CSS

Panduan:Bagaimana untuk membuat menu tarik turun yang dapat dijauhkan