นี่คือโค้ดสำหรับการสร้างปุ่ม "More" พร้อมเมนูแบบเลื่อนลง (Dropdown) ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .menu-btn { background-color: #040008; color: white; padding: 16px; font-size: 34px; font-weight: bolder; border: none; } .dropdown-menu { position: relative; display: inline-block; } .menu-content { display: none; position: absolute; background-color: #017575; min-width: 160px; z-index: 1; } nav{ background-color: #017575; } .links,.links-hidden{ display: inline-block; color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; font-size: 24px; font-weight: bold; } .links-hidden{ display: block; } .links{ display: inline-block; } .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; } </style> </head> <body> <h1>ตัวอย่างปุ่ม More ภายใน Navigation Bar</h1> <nav> <a class="links" href="#">HOME</a> <a class="links" href="#">EMPLOYEES</a> <a class="links" href="#">CAREER</a> <div class="dropdown-menu"> <button class="menu-btn">More <i class="fa fa-caret-down"></i></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> </nav> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อวางเมาส์เหนือปุ่ม More เมนูแบบเลื่อนลงจะเปิดออก −
