Dưới đây là mã nguồn để tạo thanh điều hướng responsive có menu dropdown, bao gồm hamburger menu cho mobile:
Ví dụ
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> *,*::after,*::before{ box-sizing: border-box; } .menu-btn { font-size: 18px; font-weight: bold; display: inline-block; text-align: center; background-color: #040008; color: white; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; width: 100%; } .dropdown-menu { position: relative; display: inline-block; } .menu-content { display: none; position: absolute; width: 100%; background-color: #017575; min-width: 160px; z-index: 1; } nav{ background-color: #017575; width: 100%; } .links,.links-hidden{ display: inline-block; color: rgb(255, 255, 255); text-decoration: none; font-size: 18px; font-weight: bold; padding: 20px; } .links-hidden:hover,.links:hover { background-color: rgb(8, 107, 46); } .dropdown-menu:hover .menu-content { display: block; } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } .hamburger { color: white; font-weight: bolder; display: none; } @media screen and (max-width: 880px) { nav a:not(:first-child) { display: none; } nav a.hamburger { float: right; display: block; padding: 12px; } .dropdown-menu{ display: none; } nav.openNav a.hamburger { position: relative; } nav.openNav a { float: none; display: block; text-align: center; } } nav.openNav div.dropdown-menu{ display: block; width: 100%; } </style> </head> <body> <nav> <a class="links" href="#">HOME</a> <a class="links" href="#">EMPLOYEES</a> <a class="links" href="#">CAREER</a> <a class="links" href="#">Our History</a> <a class="links" href="#">Fund Us</a> <a class="links" href="#">More Info</a> <div class="dropdown-menu"> <button class="menu-btn">Open <</button> <div class="menu-content"> <a class="links-hidden" href="#">Contact Us</a> <a class="links-hidden" href="#">Visit Us</a> <a class="links-hidden" href="#">About Us</a> </div> </div> <a class="hamburger">☰</a> </nav> <script> var x = document.getElementsByTagName("nav")[0]; function toggleNav() { if (x.className === "") { x.className = " openNav"; } else { x.className = ""; } } document.querySelector(".hamburger").addEventListener("click", toggleNav); </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi thu nhỏ cửa sổ xuống 880px hoặc ít hơn:
Khi mở hamburger menu và sau đó mở dropdown:
