Menu tarik-turun adalah menu yang dapat dipindahkan yang memungkinkan pengguna untuk memilih 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; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; 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; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <h2>Menu Dropdown yang dapat di Klik</h2> <p>Klik pada tombol untuk membuka menu dropdown.</p> <div class="dropdown"> <button title="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> <script> /* Saat pengguna mengklik tombol, toggle antara menyembunyikan dan menampilkan konten dropdown */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Tutup dropdown jika pengguna mengklik di luarnya window. title = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } </script> </body> </html>
Buat Dropdown yang Dapat Diklik
Buat menu dropdown yang muncul saat pengguna mengklik tombol
Langkah 1) Tambahkan HTML
Contoh
<div class="dropdown"> <button title="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>_
Contoh Penjelasan
Gunakan elemen apa pun untuk membuka menu dropdown, misalnya button, elemen Default) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Link didalam dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Ubah warna link dropdown on hover */ .dropdown-content a:hover {background-color: #ddd} /* Tampilkan menu dropdown (gunakan JS untuk menambahkan kelas ini ke .dropdown-content container ketika pengguna mengklik tombol dropdown) */ .show {display:block;}
Contoh Penjelasan
Kami telah menata tombol dropdown dengan warna latar belakang, padding, efek hover, dll
Kelas. dropdown menggunakan posisi. relatif, yang diperlukan saat kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position. sangat)
Kelas. dropdown-content menyimpan menu dropdown yang sebenarnya. Tersembunyi secara default, dan akan ditampilkan saat melayang (lihat di bawah). Perhatikan min-width diatur ke 160px. Tolong ubah ini. Kiat. Jika Anda ingin lebar konten dropdown selebar tombol dropdown, atur lebarnya menjadi 100% (dan atur overflow. otomatis untuk mengaktifkan pengguliran di layar kecil)
Alih-alih menggunakan perbatasan, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti "kartu". Kami juga menggunakan indeks-z untuk menempatkan dropdown di depan elemen lain