สร้าง Mega Menu แบบ Full-width Dropdown ที่ขยายเต็มความกว้างหน้าจอ เหมาะสำหรับเว็บอีคอมเมิร์ซหรือเว็บที่มีหมวดหมู่เยอะ ใช้ CSS Only
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } *,*::before,*::after{ box-sizing: border-box; } nav { overflow: hidden; background-color: rgb(2, 161, 127); font-family: Arial, Helvetica, sans-serif; } nav a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .megaButton { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; } nav a:hover, .dropdown:hover .megaButton { background-color: rgb(0, 63, 146); } .megaContent { text-align: center; display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; z-index: 1; } .megaContent .megaHeader { background: rgb(119, 6, 194); padding: 16px; color: white; } .dropdown:hover .megaContent { display: block; } .megaColumn { float: left; width: 50%; padding: 10px; background-color: rgb(233, 255, 198); height: 250px; } .megaColumn .links { color: black; padding: 16px; margin:10px; text-decoration: none; display: block; text-align: left; border-bottom: 4px solid rgb(69, 0, 90); } .megaColumn a:hover { background-color: lightblue; } .megaRow:after { content: ""; display: table; clear: both; } </style> </head> <body> <nav> <a class="links" href="#">Home</a> <a class="links" href="#">About</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> <div class="dropdown"> <button class="megaButton">Projects ></button> <div class="megaContent"> <div class="megaHeader"> <h2>Projects Menu</h2> </div> <div class="megaRow"> <div class="megaColumn"> <h3>Commercial</h3> <a class="links" href="#">Project 1</a> <a class="links" href="#">Project 2</a> </div> <div class="megaColumn"> <h3>Non-Commerial</h3> <a class="links" href="#">Project 1</a> <a class="links" href="#">Project 2</a> </div> </div> </div> </div> </nav> </body> </html>
โครงสร้าง Mega Menu
- .dropdown - Container ปุ่ม Trigger + Mega Content
- .megaContent -
position: absolute; width: 100%; left: 0;กว้างเต็มหน้าจอ - .megaHeader - หัวข้อ Mega Menu
- .megaRow - แถวครอบคอลัมน์ (Clearfix ด้วย
:after) - .megaColumn - คอลัมน์
width: 50%; float: left;2 คอลัมน์ต่อแถว
จุดสำคัญ
nav { overflow: hidden; }- Clearfix สำหรับ float ของลิงก์ปกติ.dropdown:hover .megaContent { display: block; }- CSS Only Dropdown- ใช้
floatและ Clearfix แบบเก่า แนะนำเปลี่ยนเป็น Flexbox/Grid
ผลลัพธ์
Navbar สีเขียว Hover "Projects" -> แสดง Mega Menu กว้างเต็มหน้าจอ 2 คอลัมน์ (Commercial, Non-Commercial)
