Pelajari cara membuat menu dropdown yang dapat diklik dengan CSS dan JavaScript.
Section Artikel
- 1 Dropdown
- 2 Buat Dropdown yang Dapat Diklik
- 2.1 Langkah 1) Tambahkan HTML
- 2.2 Langkah 2) Tambahkan CSS
- 2.3 Penjelasan Contoh
- 2.4 Langkah 3) Tambahkan JavaScript
- 3 Dropdown rata kanan
- 4 Menu Dropdown di Navbar
- 5 Cari (Filter) Dropdown
Dropdown
Menu dropdown adalah menu yang dapat dialihkan 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; 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>
Penjelasan Contoh
Gunakan elemen apa pun untuk membuka menu dropdown, misalnya button, elemen <a> atau <p>.
Gunakan elemen kontainer (seperti <div>) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.
Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropdown dengan benar dengan CSS.
Langkah 2) Tambahkan CSS
Contoh:
/* Tombol Dropdown */ .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Tombol Dropdown pada hover & focus */ .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* Kontainer <div> - diperlukan untuk memposisikan konten dropdown */ .dropdown { position: relative; display: inline-block; } /* Konten Dropdown (Hidden secara 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;}
Penjelasan Contoh
Kami telah memberi style pada tombol dropdown dengan warna background, padding, efek hover, dan lain-lain.
Kelas .dropdown menggunakan position: relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position: absolute).
Kelas .dropdown-content menyimpan menu dropdown 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 dropdown menjadi selebar tombol dropdown, setel lebar ke 100% (dan atur overflow: auto untuk mengaktifkan scroll di layar kecil).
Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lainnya.
Langkah 3) Tambahkan JavaScript
Contoh:
/* Saat pengguna mengklik tombol, toggle antara menyembunyikan dan menampilkan konten dropdown */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Tutup menu dropdown jika pengguna mengeklik 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'); } } } }
Dropdown rata kanan
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { float: right; 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); right: 0; 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>Konten Dropdown Sejajar</h2> <p>Gunakan <strong>float: right</strong> di kelas dropdown untuk memunculkan menu dropdown ke kanan, dan <strong>right:0</strong> pada dropdown-content jika Anda ingin konten dropdown berpindah dari kanan ke kiri.</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> function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } 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>
Menu Dropdown di Navbar
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .navbar { overflow: hidden; background-color: #333; font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { cursor: pointer; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" title="myFunction()">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>Menu Dropdown di dalam Bar Navigasi</h3> <p>Klik pada link "Dropdown" untuk melihat menu dropdown.</p> <script> function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window. title = function(e) { if (!e.target.matches('.dropbtn')) { var myDropdown = document.getElementById("myDropdown"); if (myDropdown.classList.contains('show')) { myDropdown.classList.remove('show'); } } } </script> </body> </html>
Cari (Filter) Dropdown
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; 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>Cari/Filter Dropdown</h2> <p>Klik pada tombol untuk membuka menu dropdown, dan gunakan kolom input untuk mencari link dropdown tertentu.</p> <div class="dropdown"> <button title="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a> </div> </div> <script> function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html>