Cara membuat: Menu tarik turun yang dapat di klik

Belajar cara membuat menu tarik turun yang dapat di klik menggunakan CSS dan JavaScript.

Buat menu tarik turun yang dapat di klik

Buat menu tarik turun yang muncul saat pengguna menekan tombol.

Langkah pertama - Tambahkan HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Contoh penjelasan:

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

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

Gunakan elemen <div> untuk meliputi tombol dan <div>, sehingga dapat digunakan untuk menempatkan menu dropdown dengan CSS yang benar.

Kesempatan kedua - Tambahkan CSS:

/* Tombol dropdown */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Tombol menu dropdown saat mouse berada di atas dan saat difokuskan */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* Wadah <div> - digunakan untuk menempatkan konten menu dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Konten menu dropdown (dihide 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;
}
/* Tautan di dalam menu dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ganti warna tautan menu dropdown saat mouse berada di atas */
.dropdown-content a:hover {background-color: #ddd;}
/* Tampilkan menu tarik turun (ketika pengguna mengklik tombol menu tarik turun, gunakan JS untuk menambahkan kelas ini ke kontainer .dropdown-content) */
.show {display:block;}

Contoh penjelasan:

Kami menata gaya warna latar, margin dalam, efek penyanggaan, dll. tombol menu tarik turun.

.dropdown kelas yang digunakan position:relativesaat kita ingin menempatkan konten menu tarik turun di bawah tombol menu tarik turun (menggunakan position:absolute), ini diperlukan.

.dropdown-content kelas yang mengandung menu tarik turun nyata. Ini secara default tersembunyi dan akan muncul saat mouse bergerak (lihat di bawah). Perhatikan, lebar minimum diatur menjadi 160px. Anda dapat mengubah nilai ini sesuai kebutuhan. Tips: Jika Anda ingin lebar konten menu tarik turun sama dengan tombol menu tarik turun, atur lebar menjadi 100% (dan di layar kecil menggunakan overflow:auto untuk mengaktifkan penyerapan).

Kami tidak menggunakan garis pinggir, melainkan menggunakan bayangan kotak atur, jadi menu tarik turun terlihat seperti kartu. Kita juga menggunakan z-index Letakkan menu tarik turun di depan elemen lainnya.

Tahap ketiga - Tambahkan JavaScript:

/* Saat pengguna mengklik tombol, berubah status tersembunyi dan terlihat menu konten tarik turun */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Jika pengguna mengklik diluar menu tarik turun, tutup menu tarik turun
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');
      }
    }
  }
}

Coba sendiri

Halaman yang berhubungan

Panduan:Menu dropdown CSS

Panduan:Bagaimana membuat menu dropdown yang dapat dihentui