Cara membuat menu dropdown html

Menu tarik-turun adalah menu yang dapat dipindahkan yang memungkinkan pengguna untuk memilih nilai dari daftar yang telah ditentukan sebelumnya

Table of Contents Show

Buat Dropdown yang Dapat Diklik
Bagaimana cara membuat daftar dropdown di HTML?
Apa itu fitur drop-down?
Apa fungsi menu panah drop down?

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  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>Menu Dropdown yang dapat di Klik</h2>
<p>Klik pada tombol untuk membuka menu dropdown.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* Saat pengguna mengklik tombol,
toggle antara menyembunyikan dan menampilkan konten dropdown */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Tutup dropdown jika pengguna mengklik 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');
      }
    }
  }
}
</script>

</body>
</html>

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">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Contoh Penjelasan

Gunakan elemen apa pun untuk membuka menu dropdown, misalnya button, elemen atau

Gunakan elemen kontainer (seperti

) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.

Bungkus elemen

di sekitar tombol dan

untuk memposisikan menu dropdown dengan benar dengan CSS.

Langkah 2) Tambahkan CSS

Contoh

/* Tombol Dropdown */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Tombol Dropdown pada hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* Kontainer <div> - 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;}

Contoh Penjelasan

Kami telah menata tombol dropdown dengan warna latar belakang, padding, efek hover, dll

Kelas. dropdown menggunakan posisi. relatif, yang diperlukan saat kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position. sangat)

Kelas. dropdown-content menyimpan menu dropdown yang sebenarnya. Tersembunyi secara default, dan akan ditampilkan saat melayang (lihat di bawah). Perhatikan min-width diatur ke 160px. Tolong ubah ini. Kiat. Jika Anda ingin lebar konten dropdown selebar tombol dropdown, atur lebarnya menjadi 100% (dan atur overflow. otomatis untuk mengaktifkan pengguliran di layar kecil)

Alih-alih menggunakan perbatasan, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti "kartu". Kami juga menggunakan indeks-z untuk menempatkan dropdown di depan elemen lain

Dalam HTML -nya, Menu tarik-turun dibuat dengan menggunakan elemen tag

Apa itu fitur drop-down?

Drop down list merupakan fitur excel yang fungsinya untuk mempermudah input data . Umumnya berisi beberapa opsi data dan pengguna hanya dapat memilih satu dari daftar.