Dropdown CSS

Membuat dropdown yang hoverable dengan CSS.

Dropdown Dasar

Membuat kotak dropdown yang muncul saat pengguna menggerakkan mouse di atas elemen.

Arahkan mouse kesini!

Hello World!

Contoh

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Penjelasan contoh:

HTML - Gunakan elemen apa saja untuk menampilkan konten dropdown, misalnya elemen <span>, atau <button>.

Gunakan elemen penampung (seperti <div>) untuk membuat konten dropdown dan tambahkan apa pun yang Anda inginkan di dalamnya.

Bungkus elemen <div> di sekitar elemen untuk memposisikan konten dropdown dengan benar dengan CSS.

CSS - Class .dropdown menggunakan position:relative, diperlukan ketika kita ingin mengisi dropdown untuk ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute).

Class .dropdown-content memegang konten dropdown yang sebenarnya, disembunyikan secara default, dan akan ditampilkan saat mengarahkan kursor (lihat di bawah). Perhatikan bahwa min-width diatur ke 160px. Dan jangan ragu untuk mengubahnya.

Tips: Jika Anda ingin lebar konten dropdown selebar tombol dropdown, atur width ke 100% (dan overflow:auto untuk mengaktifkan scroll pada layar kecil).

Daripada menggunakan border, kita menggunakan properti CSS box-shadow untuk membuat menu dropdown terlihat seperti "kartu".

Selector :hover digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse di atas tombol dropdown.

Menu Dropdown

Membuat menu dropdown yang memungkinkan pengguna memilih opsi dari sebuah daftar:

Link 1 Link 2 Link 3

Contoh diatas mirip dengan yang sebelumnya, namun telah ditambahkan link di dalam kotak dropdown dan menatanya agar sesuai dengan tombol dropdown.

Contoh

<style>
/* Style Dropdown Button */
.dropbtn {
  background-color: #303f9f;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Container <div> - diperlukan untuk memposisikan konten dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Konten Dropdown (Disembunyikan secara default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  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;
}

/* Mengubah warna link dropdown ketika mouse diarahkan */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Menampilkan menu dropdown menu ketika mouse diarahkan */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Mengubah warna background tombol dropdown saat konten dropdown ditampilkan */
.dropdown:hover .dropbtn {
  background-color: #3f51b5;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Konten Dropdown Rata Kanan

Jika Anda ingin menu dropdown muncul dari kanan ke kiri, tambahkan right: 0;

Link 1 Link 2 Link 3

Link 1 Link 2 Link 3

Contoh

.dropdown-content {
  right: 0;
}

Contoh Dropdown Lainnya

Gambar Dropdown

Membuat gambar dan konten lain di dalam kotak dropdown. Contoh disini, gambar menjadi lebih besar ketika pengguna mengarahkan mouse.

Arahkan kursor ke gambar:

Masjid di malam hari

Contoh

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.desc {
  padding: 15px;
  text-align: center;
}
</style>

<div class="dropdown">
  <img src="img_masjid.jpg" alt="Masjid" width="200" height="143">
  <div class="dropdown-content">
  <img src="img_masjid.jpg" alt="Masjid" width="300" height="215">
  <div class="desc">Masjid di malam hari</div>
  </div>
</div>

Navbar Dropdown

Membuat menu dropdown di dalam navigasi bar.

Contoh

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  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;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

Sumber referensi: w3schools