Bagaimana caranya - Drop-up
Pelajari cara membuat menu dropup dengan CSS.
Drop-up
Menu tarik-turun adalah menu yang dapat dialihkan yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya:
Buat Dropup yang Dapat Dilayangkan
Buat menu tarik-turun yang muncul saat pengguna menggerakkan mouse di atas elemen.
Langkah 1) Tambahkan HTML:
Contoh
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Contoh Dijelaskan
Gunakan elemen apa saja untuk membuka menu dropup, misalnya elemen <button>, <a> atau <p>.
Gunakan elemen container (seperti <div>) untuk membuat menu dropup dan menambahkan link dropup di dalamnya.
Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu tarik-turun dengan CSS dengan benar.
Langkah 2) Tambahkan CSS:
Contoh
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropup content */
.dropup {
position: relative;
display:
inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position:
absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the
dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the
dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the
dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
Contoh Dijelaskan
Kami telah menata tombol dropup dengan warna latar, padding, dll.
Kelas .dropup
menggunakan position:relative
, yang diperlukan ketika kita ingin konten dropup ditempatkan di atas tombol dropup (menggunakan position:absolute
).
Kelas .dropup-content
memegang menu dropup yang sebenarnya. Itu disembunyikan secara default, dan akan ditampilkan saat mengarahkan kursor (lihat di bawah). Perhatikan bahwa min-width
diatur ke 160px. Jangan ragu untuk mengubah ini. Tip: Jika Anda ingin lebar konten dropup selebar tombol dropup, atur width
ke 100% (dan overflow:auto
untuk mengaktifkan scroll di layar kecil).
Alih-alih menggunakan perbatasan, kami telah menggunakan box-shadow
properti untuk membuat menu dropup terlihat seperti "kartu". Kami juga menggunakan z-index untuk menempatkan dropup di depan elemen lain.
Selector digunakan untuk menampilkan menu dropup :hover
ketika pengguna menggerakkan mouse di atas tombol dropup.