ตัวอย่างครบวงจร: Responsive Navbar พร้อม Dropdown Menu และ Hamburger Menu สำหรับมือถือ ใช้ CSS สำหรับ Layout และ JavaScript น้อยสำหรับ Toggle Hamburger
ตัวอย่างโค้ด
<!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>
โครงสร้างการทำงาน
Desktop (≥880px)
- แสดงลิงก์ทั้งหมดแนวนอน
- Dropdown "Open <<" ใช้ CSS :hover แสดงเมนูย่อย
Mobile (<880px)
- ซ่อนลิงก์ทั้งหมด ยกเว้น Hamburger (☰)
- คลิก Hamburger -> JS Toggle class
.openNavบน <nav> .openNavทำให้ลิงก์แสดงบล็อกแนวตั้ง และ Dropdown แสดง
จุดปรับปรุงแนะนำ
- ใช้
classList.toggle('openNav')แทนการเช็ค className - เพิ่ม ARIA attributes สำหรับ Accessibility
- ใช้
<button>สำหรับ Hamburger แทน <a>
ผลลัพธ์
Desktop: Navbar สีเขียวเต็มความกว้าง พร้อม Dropdown
Mobile: แสดงแค่ ☰ คลิกแล้วขยายเมนูแนวตั้ง พร้อม Dropdown
