Dưới đây là mã để tạo menu thả xuống (dropdown) có thể nhấp chuột bằng CSS và JavaScript:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn { background-color: #7e32d4; color: white; padding: 16px; font-size: 20px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; } .dropdown-menu { position: relative; display: inline-block; } .menu-content { display: none; position: absolute; background-color: #017575; min-width: 160px; z-index: 1; } .links { color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; display: block; font-size: 18px; font-weight: bold; border-bottom: 1px solid black; } .links:hover { background-color: rgb(8, 107, 46); } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } </style> </head> <body> <h2>Nhấn vào nút dropdown bên dưới để mở/đóng menu</h2> <div class="dropdown-menu"> <button class="menu-btn">Mở <</button> <div class="menu-content"> <a class="links" href="#">Liên hệ</a> <a class="links" href="#">Ghé thăm</a> <a class="links" href="#">Về chúng tôi</a> </div> </div> <script> let dropdownBtn = document.querySelector('.menu-btn'); let menuContent = document.querySelector('.menu-content'); dropdownBtn.addEventListener('click',()=>{ if(menuContent.style.display===""){ menuContent.style.display="block"; } else { menuContent.style.display=""; } }) </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi nhấn nút mở:
