วิธีสร้างเมนูแบบดรอปดาวน์ (Dropdown Menu) ที่คลิกได้ ด้วย CSS และ JavaScript

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

สร้างปุ่มดรอปดาวน์ที่เมื่อคลิกจะแสดง/ซ่อนรายการเมนู โดยใช้ CSS จัดการแสดงผลและ JavaScript ควบคุมการ toggle

<!DOCTYPE html>
<html lang="th">
<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: bold;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
    .dropdown-menu {
      position: relative;
      display: inline-block;
    }
    .menu-content {
      display: none;
      position: absolute;
      background-color: #017575;
      min-width: 160px;
      z-index: 1;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .links {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .links:last-child {
      border-bottom: none;
    }
    .links:hover {
      background-color: rgb(8, 107, 46);
    }
    .dropdown-menu:hover .menu-btn {
      background-color: #3e8e41;
    }
    /* แสดงเมนูเมื่อมี class active */
    .dropdown-menu.active .menu-content {
      display: block;
    }
  </style>
</head>
<body>
  <h2>คลิกปุ่มด้านล่างเพื่อเปิด/ปิดเมนูดรอปดาวน์</h2>
  <div class="dropdown-menu">
    <button class="menu-btn">เปิดเมนู ▼</button>
    <div class="menu-content">
      <a class="links" href="#">ติดต่อเรา</a>
      <a class="links" href="#">เยี่ยมชมเรา</a>
      <a class="links" href="#">เกี่ยวกับเรา</a>
    </div>
  </div>

  <script>
    const dropdownBtn = document.querySelector('.menu-btn');
    const menuContent = document.querySelector('.menu-content');
    const dropdownMenu = document.querySelector('.dropdown-menu');

    dropdownBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      dropdownMenu.classList.toggle('active');
    });

    // ปิดเมนูเมื่อคลิกนอกพื้นที่
    document.addEventListener('click', (e) => {
      if (!dropdownMenu.contains(e.target)) {
        dropdownMenu.classList.remove('active');
      }
    });
  </script>
</body>
</html>

การทำงาน

• คลิกปุ่ม "เปิดเมนู ▼" จะ toggle class active บน container
• CSS .dropdown-menu.active .menu-content { display: block; } แสดงเมนู
• คลิกนอกพื้นที่เมนูจะปิดอัตโนมัติ (event delegation)

จุดสำคัญของโค้ด

• position: relative บน .dropdown-menu ทำให้ .menu-content จัดตำแหน่งได้ด้วย absolute
• z-index: 1 ทำให้เมนูอยู่เหนือเนื้อหาอื่น
• e.stopPropagation() ป้องกันการปิดเมนูทันทีเมื่อคลิกที่ปุ่ม
• ใช้ classList.toggle() แทนการตรวจสอบ style.display โดยตรง

แนวทางปรับปรุง

• เพิ่ม keyboard navigation (Arrow keys, Enter, Escape)
• รองรับหลาย dropdown บนหน้าเดียวกัน
• เพิ่ม animation transition สำหรับการแสดง/ซ่อน
• เพิ่ม ARIA attributes (aria-haspopup, aria-expanded)