Belajar cara membuat menu dropup dengan CSS.
Menu dropup adalah menu toggleable 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: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; } .dropup { position: relative; display: inline-block; } .dropup-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; bottom: 50px; z-index: 1; } .dropup-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropup-content a:hover {background-color: #ccc} .dropup:hover .dropup-content { display: block; } .dropup:hover .dropbtn { background-color: #2980B9; } </style> </head> <body> <h2>Drop-Up yang Dapat Diarahkan</h2> <p>Contoh text...</p> <p>Contoh text...</p> <p>Gerakkan mouse ke atas tombol untuk membuka menu dropup.</p> <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> </body> </html>
Section Artikel
Cara membuat Dropup yang Dapat Diarahkan
Buat menu drop-up yang muncul saat pengguna menggerakkan mouse ke atas sebuah 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>Penjelasan Contoh
Gunakan elemen apa pun untuk membuka menu dropup, misalnya <button>, elemen <a> atau <p>.
Gunakan elemen penampung (seperti <div>) untuk membuat menu drop-up dan menambahkan link dropup di dalamnya.
Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropup dengan benar dengan CSS.
Langkah 2) Tambahkan CSS
Contoh:
/* Tombol Dropup */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* Wadah <div> - diperlukan untuk memposisikan konten dropup */
.dropup {
position: relative;
display: inline-block;
}
/* Konten dropup (Disembunyikan secara 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;
}
/* Tautan di dalam dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Ubah warna link dropup saat mengarahkan kursor */
.dropup-content a:hover {background-color: #ddd}
/* Tampilkan menu drop-up saat mengarahkan kursor */
.dropup:hover .dropup-content {
display: block;
}
/* Ubah warna background tombol drop-up saat konten dropup ditampilkan */
.dropup:hover .dropbtn {
background-color: #2980B9;
}Penjelasan Contoh:
Kami telah memberi style pada tombol dropup dengan warna background, padding, dan lain-lain.
Kelas .dropup menggunakan position: relative, yang diperlukan ketika kita ingin konten dropup ditempatkan di atas tombol dropup (menggunakan position: absolute).
Kelas .dropup-content menyimpan menu dropup yang sebenarnya. Itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan ubah ini. Tips: Jika Anda ingin lebar konten dropup menjadi selebar tombol dropup, 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 drop-up terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropup di depan elemen lainnya.
Selector :hover digunakan untuk menampilkan menu drop-up saat pengguna menggerakkan mouse ke atas tombol drop-up.
