Buatlah dropdown yang bisa di-hover dengan CSS.
Section Artikel
Dropdown Dasar
Buat kotak dropdown yang muncul ketika kita menggerakkan mouse ke atas sebuah elemen.
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>Arahkan Mouse ke sini!!!</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>Penjelasan Kode :
HTML) Gunakan elemen apa pun untuk membuka konten dropdown, mis. a <span> , atau elemen<button> .
Gunakan elemen kontainer (seperti<div>) untuk membuat konten dropdown dan tambahkan apa pun yang kita inginkan di dalam elemen tersebut..
Bungkus elemen <div> di sekitar elemen untuk memposisikan konten dropdown yang benar dengan CSS.
CSS) Kelas .dropdown menggunakan position: relative(induk), yang dibutuhkan jika kita ingin konten dropdown berada tepat di bawah tombol dropdown (menggunakan position: absolute(turunan)).
Kelas .dropdown-content merupakan tempat menyimpan konten dropdown yang sebenarnya. Secara default disembunyika, dan akan ditampilkan saat kursor diarahkan ke konten (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan di ubah jika ingin. Tip: Jika kita ingin lebar konten dropdown menjadi selebar tombol dropdown, setel width ke 100% (dan overflow: auto untuk mengaktifkan scroll di layar kecil).
Daripada menggunakan border, kita gunakan properti CSS box-shadow untuk membuat menu dropdown terlihat seperti “kartu”.
Selektor :hover digunakan untuk menampilkan menu dropdown saat kita menggerakkan mouse ke atas tombol dropdown.
Menu Dropdown
Buat menu dropdown yang memungkinkan kita untuk memilih opsi dari daftar:
Contoh berikut ini mirip dengan yang sebelumnya, kecuali kita tambahkan tautan di dalam kotak dropdown dan menatanya agar sesuai dengan tombol dropdown:
Contoh :
<style>
/* Gaya tombol dropdown */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - posisi untuk konten dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* Konten Dropdown (default = Disembunyikan) */
.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 di dalam dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Merubah Warna link dropdown di hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* menampilkan menu dropdown di hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Ubah warna latar belakang(background) tombol dropdown saat menu dropdown ditampilkan */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</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 kita ingin menu dropdown dari kanan ke kiri bukan dari kiri ke kanan, tambahkan kanan: 0;
Contoh :
.dropdown-content {
right: 0;
}Contoh Lain :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
<h3>Dropdown menu untuk navigation navbar</h3>
<p>klik salah satu menu diatas dan lihat yang terjadi.</p>
</body>
</html>
