สร้าง Dropup Menu (เมนูที่ขยายขึ้นไปด้านบนแทนที่จะลง) ใช้ position: absolute; bottom: 100%; บน Dropdown Content
ตัวอย่างโค้ด
<!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; padding-top: 130px; } .menu-content { display: none; position: absolute; bottom: 50px; 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-content { display: block; } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } </style> </head> <body> <h2>Hover over the below button to open a dropup menu</h2> <div class="dropdown-menu"> <button class="menu-btn">Open <</button> <div class="menu-content"> <a class="links" href="#">Contact Us</a> <a class="links" href="#">Visit Us</a> <a class="links" href="#">About Us</a> </div> </div> </body> </html>
หลักการ Dropup
- .dropdown-menu { padding-top: 130px; } - ดัน Container ลง เพื่อให้มีพื้นที่ด้านบนสำหรับ Dropup
- .menu-content { bottom: 50px; } - จุดกำเนิดด้านล่าง ขึ้นไป 50px จากปุ่ม
- ที่เหลือเหมือน Dropdown ปกติ:
position: absolute; display: none;แล้ว:hover -> display: block
กรณีใช้งานจริง
- ปุ่มอยู่ใกล้ขอบล่างหน้าจอ (Bottom-fixed toolbar)
- Footer Navigation
- Chat Input Bar ที่มีเมนูแนบไฟล์/อีโมจิ
ผลลัพธ์
ปุ่มม่วง "Open <<" Hover -> เมนูสีเขียวขยายขึ้นด้านบน 3 รายการ ขีดคั่นสีดำ
