การสร้าง Dropdown Menu ด้วย CSS

Dropdown Menu เป็นองค์ประกอบที่พบเห็นได้บ่อยในเว็บไซต์ต่างๆ ช่วยให้ผู้ใช้สามารถเข้าถึงตัวเลือกเพิ่มเติมได้อย่างสะดวกโดยไม่ทำให้หน้าเว็บดูรกจนเกินไป ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้าง Dropdown Menu อย่างง่ายด้วย CSS โดยเน้นที่การใช้คุณสมบัติ position, การจัดการ visibility และ hover effect เพื่อสร้างประสบการณ์การใช้งานที่ราบรื่น

ความรู้พื้นฐานที่ต้องมี

ก่อนเริ่มสร้าง Dropdown Menu คุณควรมีความเข้าใจพื้นฐานเกี่ยวกับ HTML และ CSS ดังนี้:

HTML: โครงสร้างพื้นฐานของหน้าเว็บ, การสร้าง element ต่างๆ เช่น <div>, <ul>, <li>, <a>
CSS: การเลือก element ด้วย selector, การกำหนดคุณสมบัติพื้นฐาน เช่น display, width, height, background-color, color, padding, margin
Positioning: ความเข้าใจเกี่ยวกับ position: relative และ position: absolute

โครงสร้าง HTML สำหรับ Dropdown Menu

เริ่มต้นด้วยการสร้างโครงสร้าง HTML ที่จำเป็นสำหรับ Dropdown Menu ของเรา เราจะใช้ <div> เป็น container หลัก, <a> เป็น trigger (ปุ่มที่ใช้เปิด/ปิด Dropdown), และ <ul> เป็น container สำหรับรายการตัวเลือกใน Dropdown


<div class="dropdown">
  <a href="#" class="dropdown-trigger">เมนู</a>
  <ul class="dropdown-menu">
    <li><a href="#">ตัวเลือก 1</a></li>
    <li><a href="#">ตัวเลือก 2</a></li>
    <li><a href="#">ตัวเลือก 3</a></li>
  </ul>
</div>

ในโค้ดข้างต้น:

<div class="dropdown"> คือ container หลักที่ห่อหุ้ม Dropdown Menu ทั้งหมด
<a href="#" class="dropdown-trigger"> คือ trigger ที่ผู้ใช้คลิกเพื่อเปิด/ปิด Dropdown
<ul class="dropdown-menu"> คือรายการตัวเลือกที่จะแสดงเมื่อ Dropdown ถูกเปิด
<li><a href="#"> คือแต่ละตัวเลือกในรายการ Dropdown

CSS Styling สำหรับ Dropdown Menu

ตอนนี้เราจะมาเขียน CSS เพื่อจัดรูปแบบ Dropdown Menu ของเรา เริ่มจากการกำหนด style ให้กับ container หลัก:


.dropdown {
  position: relative; /* ทำให้ dropdown-menu สามารถใช้ position: absolute ได้ */
  display: inline-block; /* แสดงเป็น inline block เพื่อให้จัดวางในบรรทัดเดียวกับ element อื่นได้ */
}

ที่สำคัญคือการกำหนด position: relative ให้กับ .dropdown container เพื่อให้เราสามารถใช้ position: absolute กับ .dropdown-menu ได้

ต่อไป เราจะกำหนด style ให้กับ dropdown trigger (ปุ่ม "เมนู"):


.dropdown-trigger {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none; /* ลบเส้นใต้ของ link */
  display: block; /* ทำให้กินพื้นที่เต็ม */
}

และสุดท้าย เราจะกำหนด style ให้กับ dropdown menu:


.dropdown-menu {
  display: none; /* ซ่อน dropdown menu ตอนเริ่มต้น */
  position: absolute; /* วางตำแหน่งแบบ absolute เทียบกับ dropdown container */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* ทำให้ dropdown menu แสดงอยู่เหนือ element อื่นๆ */
  list-style: none; /* ลบ bullet ของ list */
  padding: 0; /* ลบ padding ของ list */
  margin: 0; /* ลบ margin ของ list */
}

.dropdown-menu li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* ทำให้ link กินพื้นที่เต็ม */
}

.dropdown-menu li a:hover {
  background-color: #ddd;
}

ในโค้ดข้างต้น:

display: none; ซ่อน dropdown menu ตอนเริ่มต้น
position: absolute; วางตำแหน่ง dropdown menu แบบ absolute เทียบกับ .dropdown container
z-index: 1; ทำให้ dropdown menu แสดงอยู่เหนือ element อื่นๆ บนหน้าเว็บ
list-style: none;, padding: 0;, margin: 0; ลบ style เริ่มต้นของ <ul>
.dropdown-menu li a กำหนด style ให้กับแต่ละ link ใน dropdown menu
.dropdown-menu li a:hover กำหนด style เมื่อ hover บนแต่ละ link

การแสดงผล Dropdown Menu ด้วย Hover Effect

ตอนนี้เราจะใช้ CSS :hover pseudo-class เพื่อแสดง dropdown menu เมื่อผู้ใช้ hover บน dropdown trigger:


.dropdown:hover .dropdown-menu {
  display: block; /* แสดง dropdown menu เมื่อ hover บน dropdown container */
}

โค้ดนี้จะเปลี่ยน display ของ .dropdown-menu เป็น block เมื่อมีการ hover บน .dropdown container ซึ่งจะทำให้ dropdown menu ปรากฏขึ้น

ตัวอย่างโค้ดทั้งหมด

นี่คือโค้ด HTML และ CSS ทั้งหมดที่เราได้สร้างขึ้น:


<div class="dropdown">
  <a href="#" class="dropdown-trigger">เมนู</a>
  <ul class="dropdown-menu">
    <li><a href="#">ตัวเลือก 1</a></li>
    <li><a href="#">ตัวเลือก 2</a></li>
    <li><a href="#">ตัวเลือก 3</a></li>
  </ul>
</div>


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-menu li a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

คุณสามารถคัดลอกโค้ดนี้ไปลองใช้งานบนเครื่องของคุณได้เลย

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

การจัดวาง Dropdown Menu: หาก Dropdown Menu แสดงผลผิดตำแหน่ง ให้ตรวจสอบว่า .dropdown container มี position: relative หรือไม่
ปัญหา Z-index: หาก Dropdown Menu ถูก element อื่นบัง ให้ตรวจสอบว่า .dropdown-menu มี z-index ที่สูงกว่า element อื่นๆ หรือไม่
การใช้งานกับ JavaScript: ในบางกรณี คุณอาจต้องการใช้ JavaScript เพื่อควบคุมการแสดงผลของ Dropdown Menu แทนการใช้ :hover effect เพื่อให้สามารถรองรับการใช้งานบนอุปกรณ์สัมผัสได้ดียิ่งขึ้น
Responsive Design: อย่าลืมปรับ style ของ Dropdown Menu ให้รองรับการแสดงผลบนอุปกรณ์ขนาดต่างๆ โดยใช้ Media Queries

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Dropdown Menu อย่างง่ายด้วย CSS โดยใช้ position: absolute, การจัดการ visibility และ hover effect Dropdown Menu เป็นองค์ประกอบที่มีประโยชน์ในการจัดระเบียบ navigation และตัวเลือกต่างๆ บนเว็บไซต์ของคุณ หวังว่าบทความนี้จะเป็นประโยชน์และช่วยให้คุณสามารถสร้าง Dropdown Menu ที่สวยงามและใช้งานได้จริง