Pelajari cara membuat menu dropdown hoverable dengan CSS.
dropdown
Sebuah menu dropdown adalah menu toggleable yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar yang tersedia:
Membuat Hoverable Dropdown
Membuat menu dropdown yang muncul saat pengguna menggerakkan mouse di atas elemen.
Langkah 1) Tambah 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>misalnya Dijelaskan
Gunakan setiap elemen untuk membuka menu dropdown, misalnya <button>, <a> atau <p> elemen.
Gunakan elemen wadah (like <div>) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.
Bungkus <div> elemen di sekitar tombol dan <div> untuk posisi menu dropdown benar dengan CSS.
Langkah 2) Tambah CSS:
Contoh
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by 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);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
} Cobalah sendiri " misalnya Dijelaskan
Kami telah ditata tombol dropdown dengan latar belakang warna, padding, dll
The .dropdown penggunaan kelas position:relative , yang diperlukan ketika kita ingin isi dropdown untuk ditempatkan tepat di bawah tombol dropdown (using position:absolute ) .
The .dropdown-content kelas memegang menu dropdown yang sebenarnya. Hal ini tersembunyi secara default, dan akan ditampilkan di hover (see below) . Perhatikan min-width diatur ke 160px. Jangan ragu untuk mengubah ini. Tip: Jika Anda ingin lebar isi dropdown untuk menjadi selebar tombol dropdown, mengatur width sampai 100% (dan overflow:auto untuk mengaktifkan gulir pada layar kecil).
Alih-alih menggunakan perbatasan, kami telah menggunakan box-shadow properti untuk membuat menu dropdown terlihat seperti "card" .
The :hover pemilih digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse di atas tombol dropdown.
Dropdown Menu dalam Navbar
Tip: Pergi ke kami CSS dropdown Tutorial untuk mempelajari lebih lanjut tentang dropdown.