Cara Membuat Menu Dropdown Hoverable

Pelajari cara membuat menu dropdown yang dapat di-hover dengan CSS.

Section Artikel

1 Dropdown
2 Buat Dropdown Hoverable
3 Dropdown rata kanan
4 Menu Dropdown di Navbar

Dropdown

Menu dropdown adalah menu yang dapat dialihkan yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya.

Contoh:

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

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

.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;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

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

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Arahkan mouse ke atas tombol untuk membuka menu dropdown.</p>

<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>

</body>
</html>

Buat Dropdown Hoverable

Buat menu dropdown yang muncul saat pengguna menggerakkan mouse ke atas suatu elemen.

Langkah 1) Tambahkan HTML

Contoh:

<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>

Penjelasan Contoh

Gunakan elemen apa pun untuk membuka menu dropdown, misalnya: elemen <button>, <a> atau <p>.

Gunakan elemen kontainer (seperti <div>) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.

Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropdown dengan benar menggunakan CSS.

Langkah 2) Tambahkan CSS

Contoh:

/* Tombol Dropdown */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

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

/* Links 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 on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Ubah warna background tombol dropdown saat konten dropdown ditampilkan */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Penjelasan Contoh

Kami telah memberi style pada tombol dropdown dengan warna background, padding, dan lain-lain.

Kelas .dropdown menggunakan position: relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position: absolute).

Kelas .dropdown-content menyimpan menu dropdown yang sebenarnya. Kelas itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan ubah ini sesuai kemauan anda. Tips: Jika Anda ingin lebar konten dropdown menjadi selebar tombol dropdown, setel lebar ke 100% (dan overflow: auto untuk mengaktifkan scroll di layar kecil).

Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lainnya.

Selektor :hover digunakan untuk menampilkan menu dropdown saat pengguna menggerakkan mouse ke atas tombol dropdown.

Dropdown rata kanan

Contoh:

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

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

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  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;
}

.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Konten Dropdown Rata Kanan</h2>
<p>Tentukan apakah konten dropdown harus dari kiri ke kanan atau kanan ke kiri dengan properti left dan right.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Kiri</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Kanan</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Menu Dropdown di Navbar

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.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 {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

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

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

<h3>Menu Dropdown di dalam Bar Navigasi</h3>
<p>Arahkan kursor ke link "Dropdown" untuk melihat menu drop-down.</p>

</body>
</html>

How To

Cara Membuat Menu Dropdown Hoverable

Dropdown

Buat Dropdown Hoverable

Langkah 1) Tambahkan HTML

Penjelasan Contoh

Langkah 2) Tambahkan CSS

Penjelasan Contoh

Dropdown rata kanan

Menu Dropdown di Navbar

Cara Membuat Navbar pada Gambar

Cara Membuat Menu Dropdown yang Dapat di klik

You may also like