Buat dropdown hoverable dengan CSS.
Demo: Contoh Dropdown
Pindahkan mouse contoh di bawah ini:
Dropdown dasar
Membuat kotak dropdown yang muncul saat pengguna bergerak mouse di atas 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> Mouse over me </span>
<div class="dropdown-content">
<p> Hello World! </p>
</div>
</div> Cobalah sendiri " misalnya Dijelaskan
HTML) Gunakan setiap elemen untuk membuka konten dropdown, misalnya <span> , atau <button> elemen.
Gunakan elemen kontainer (seperti <div> ) untuk menciptakan konten dropdown dan menambahkan apapun yang Anda inginkan di dalamnya.
Bungkus <div> elemen di sekitar elemen untuk posisi konten dropdown benar dengan CSS.
CSS) The .dropdown penggunaan kelas position:relative , yang diperlukan ketika kita ingin isi dropdown untuk ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute ).
The .dropdown-content kelas memegang konten dropdown yang sebenarnya. Tersembunyi secara default, dan akan ditampilkan di hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Jangan ragu untuk mengubah Tip ini:. Jika Anda ingin lebar isi dropdown menjadi selebar tombol dropdown, mengatur width sampai 100% (dan overflow:auto untuk mengaktifkan gulir pada layar kecil).
Alih-alih menggunakan perbatasan, kami telah menggunakan CSS3 box-shadow properti untuk membuat menu dropdown terlihat seperti "kartu".
The :hover pemilih digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse di atas tombol dropdown.
Menu drop down
Membuat menu dropdown yang memungkinkan pengguna untuk memilih opsi dari daftar:
Contoh ini mirip dengan yang sebelumnya, kecuali bahwa kita menambahkan link di dalam kotak dropdown dan gaya mereka cocok tombol dropdown gaya:
Contoh
<style>
/* Style The 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;
}
</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> Cobalah sendiri " Benar-blok Content Dropdown
Jika Anda ingin menu dropdown untuk pergi dari kanan ke kiri, bukan dari kiri ke kanan, tambahkan right: 0;
Contoh lebih
dropdown Gambar
Contoh ini menunjukkan bagaimana untuk menambahkan gambar dan konten lainnya dalam kotak dropdown.
dropdown Navbar
Contoh ini menunjukkan bagaimana untuk menambahkan menu dropdown di dalam sebuah bar navigasi.