สร้าง Dropdown Menu ด้วย CSS: คู่มือแบบเป็นขั้นตอน

ปัจจุบัน เมนูแบบดรอปดาวน์ (dropdown menu) เป็นคุณสมบัติทั่วไปของเว็บไซต์สมัยใหม่ เมนูเหล่านี้ช่วยสร้างการนำทางที่ปรับแต่งได้ เพื่อให้ผู้ใช้หาข้อมูลที่ต้องการได้ง่ายขึ้น

CSS ร่วมกับ HTML สามารถสร้างเมนูดรอปดาวน์ที่แสดงเนื้อหาเฉพาะเมื่อผู้ใช้วางเมาส์เหนือป้ายเมนู

บทช่วยสอนนี้จะอธิบายวิธีสร้าง dropdown menu ด้วย CSS พร้อมตัวอย่าง หลังอ่านจบ คุณจะมีโค้ดและเครื่องมือเพื่อสร้างเมนูของตัวเอง

หลักการทำงานของ CSS Dropdown Menu

ใน HTML ไม่มีแท็กเฉพาะสำหรับสร้าง dropdown menu

แต่ด้วย CSS เราสามารถสร้างเมนูที่แสดงข้อความหรือลิงก์เมื่อผู้ใช้วางเมาส์เหนือเมนูได้ บทช่วยสอนนี้จะใช้ HTML และ CSS ร่วมกัน

สมมติว่าคลับแบดมินตันท้องถิ่นขอให้สร้างเว็บไซต์แบ่งปันข้อมูล클ับ ประวัติ และวิธีสมัคร

คลับต้องการ dropdown menu ที่ทำงานเมื่อวางเมาส์ แสดงรายการ 3 หน้า: อุปกรณ์ (Equipment), เริ่มต้นใช้งาน (Getting Started), และข้อมูลสมาชิก (Membership Information) ป้ายเมนูคือ "New Members"

ตัวอย่าง Dropdown Menu

มาสร้าง dropdown menu นี้ด้วย CSS กัน

ขั้นแรก สร้างโครงสร้างเมนูพื้นฐานใน HTML:

<div class="menu"> <button class="dropdown_button">New Members</button> <div class="content"> <a href="equipment.html">Equipment</a> <a href="gettingstarted.html">Getting Started</a> <a href="membership.html">Membership Information</a> </div> </div>

โค้ดข้างต้นทำดังนี้:

• สร้าง <div> คลาส menu เก็บโค้ดเมนู
• สร้างปุ่มแสดงข้อความ New Members
• สร้าง <div> ใหม่สำหรับรายการลิงก์
• ใช้ <a> 3 ตัวสร้างลิงก์ไปหน้าอุปกรณ์ เริ่มต้นใช้งาน และข้อมูลสมาชิก

โค้ดจะแสดงผลเป็น HTML ธรรมดา (ยังไม่มีสไตล์)

ต่อไป ใช้ CSS จัดสไตล์ dropdown menu:

.dropdown_button { background-color: #90EE90; color: white; padding: 10px; font-size: 15px; border: none; }
.menu { display: inline-block; position: relative; }
.content { display: none; background-color: lightgray; min-width: 150px; z-index: 1; position: absolute; }
.content a { text-decoration: none; display: block; color: black; padding: 16px; }
.content a:hover { background-color: #f7f7f7; }
.menu:hover .content { display: block; }

อธิบายการทำงาน:

• .dropdown_button: จัดสไตล์ปุ่ม — พื้นหลонสีเขียวอ่อน ตัวอักษรสีขาว padding 10px ขนาดตัวอักษร 15px ไม่มีขอบ
• .menu: จัดวางแบบ inline-block และ position relative เพื่อเป็นจุดอ้างอิงสำหรับเนื้อหาที่เป็น absolute
• .content: ซ่อนไว้ก่อน (display: none) พื้นหลังสีเทาอ่อน ความกว้างขั้นต่ำ 150px z-index 1 เพื่อให้อยู่เหนือ元素อื่น position absolute
• .content a: จัดสไตล์ลิงก์ — ลบเส้นใต้ แสดงแบบ block สีดำ padding 16px
• .content a:hover: เมื่อวางเมาส์เหนือลิงก์ พื้นหลังเปลี่ยนเป็นสีเทาอ่อน (#f7f7f7)
• .menu:hover .content: เมื่อวางเมาส์เหนือเมนู แสดงเนื้อหาเป็น block

หากสนใจรายละเอียดของ :hover selector โปรดอ่านคู่มือ CSS :hover selector

Dropdown Menu ด้านขวา (Right Dropdown Menu)

ตัวอย่างข้างต้นแสดงเมนูด้านซ้าย หากต้องการให้เมนูปรากฏด้านขวา ให้เพิ่มกฎ CSS นี้:

.content { right: 0; }

กฎนี้จะเลื่อน dropdown และเนื้อหาไปทางขวาของหน้าจอ

สรุป

HTML สร้างโครงสร้างพื้นฐานของ dropdown menu จากนั้นใช้ CSS จัดสไตล์ให้สมบูรณ์และสวยงาม

บทช่วยสอนนี้อธิบายวิธีสร้าง dropdown menu ด้วย HTML และ CSS พร้อมตัวอย่าง โค้ดในบทความนี้จะช่วยให้คุณสร้าง dropdown menu ของตัวเองได้