CARA MEMBUAT DROPDOWN DI HTML

Membuat sebuah menu dropdown di HTML sebenarnya cukup mudah dan sederhana, terutama jika kamu sudah mengenal dasar-dasar pemrograman HTML dan CSS. Dalam artikel ini, kita akan membahas step-by-step bagaimana cara membuat dropdown di HTML.

Mengenal Dropdown

Sebagai sebuah elemen antarmuka, dropdown adalah cara yang efisien untuk menampilkan sejumlah besar pilihan kepada pengguna dengan menggunakan ruang yang minimal. Saat sebuah item dropdown diklik, menu akan diperluas untuk menunjukkan pilihan-pilihan lainnya.

Langkah 1: Buat Struktur HTML

Pertama, kamu perlu membuat struktur HTML untuk dropdown. Ini adalah contoh struktur dasar untuk sebuah dropdown.

<div class="dropdown">
  <button class="dropdown-button">Pilih</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Dalam hal ini, “Pilih” adalah teks yang akan ditampilkan pada tombol dropdown, dan “Option 1”, “Option 2”, dan “Option 3” adalah pilihan dalam dropdown.

Langkah 2: Buat CSS untuk Dropdown

Selanjutnya kita akan membuat CSS untuk dropdown. CSS ini bertujuan untuk mengatur tampilan dropdown supaya lebih menarik.

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

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  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-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropdown-button {
  background-color: #3e8e41;
}

Berikut adalah penjelasan singkat dari kode CSS di atas:

• position: relative; dan position: absolute; digunakan untuk mengatur posisi dari dropdown dan kontennya.
• display: none; digunakan untuk menyembunyikan konten dropdown hingga tombolnya diklik.
• box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); digunakan untuk memberikan efek bayangan pada dropdown.
• z-index: 1; digunakan untuk memastikan dropdown selalu tampil di atas elemen lain di halaman.
• color: black; digunakan untuk mengatur warna teks pada link dalam dropdown.
• background-color: #3e8e41; digunakan untuk mengubah warna latar tombol dropdown saat dihover.

Kesimpulan

Membuat dropdown di HTML adalah hal yang cukup mudah dan dapat dikerjakan hanya dalam beberapa menit saja. Jangan lupa untuk selalu eksperimen dengan kode agar tampilan dan fungsinya sesuai dengan keinginan kamu.

Semoga artikel ini membantu kamu dalam belajar cara membuat dropdown di HTML. Selamat mencoba!