วิธีสร้างเมนูนำทางแบบม่าน (Curtain Navigation) ด้วย CSS และ JavaScript

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

ต่อไปนี้เป็นโค้ดสำหรับสร้างเมนูนำทางแบบม่านที่เลื่อนออกมาจากด้านข้างจอภาพ โดยใช้ CSS สำหรับการจัดรูปแบบและ JavaScript สำหรับการควบคุมการเปิด/ปิด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Curtain Navigation Menu</title>
  <style>
    .sideNav {
      height: 100vh;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgba(46, 218, 195, 0.4);
      overflow-x: hidden;
      padding-top: 60px;
      transition: width 0.5s ease;
    }
    .sideNav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #000000;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      display: block;
      transition: color 0.3s;
      text-align: center;
    }
    .sideNav a:hover {
      color: #f1f1f1;
    }
    .sideNav .closeBtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    .openSideNav {
      padding: 15px;
      background-color: rgb(0, 27, 145);
      color: white;
      font-size: 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .main-content {
      padding: 20px;
      transition: margin-left 0.5s;
    }
  </style>
</head>
<body>
  <nav class="sideNav">
    <a href="#" class="closeBtn">×</a>
    <a href="#">เข้าสู่ระบบ</a>
    <a href="#">สมัครสมาชิก</a>
    <a href="#">หน้าแรก</a>
    <a href="#">เกี่ยวกับเรา</a>
  </nav>

  <button class="openSideNav">คลิกเพื่อเปิดเมนูด้านข้าง</button>

  <div class="main-content">
    <h1>หัวข้อหลัก</h1>
    <p>เนื้อหาบางส่วนที่นี่</p>
    <h2>หัวข้อย่อย</h2>
    <p>เนื้อหาเพิ่มเติม</p>
  </div>

  <script>
    const openBtn = document.querySelector(".openSideNav");
    const closeBtn = document.querySelector(".closeBtn");
    const sideNav = document.querySelector(".sideNav");

    openBtn.addEventListener("click", () => {
      sideNav.style.width = "100%";
    });

    closeBtn.addEventListener("click", () => {
      sideNav.style.width = "0";
    });
  </script>
</body>
</html>

การทำงาน

เมื่อคลิกปุ่ม "คลิกเพื่อเปิดเมนูด้านข้าง" เมนูจะเลื่อนออกมาครอบคลุมจอภาพทั้งหมด (100% width) พร้อมเอฟเฟกต์การเปลี่ยนผ่าน (transition) ที่นุ่มนวล

เมื่อคลิกปุ่ม × (ปิด) เมนูจะเลื่อนกลับซ่อนตัว (width = 0)

คำอธิบายโค้ดสำคัญ

• .sideNav - ใช้ position: fixed และ width: 0 เริ่มต้น เพื่อซ่อนเมนูไว้ข้างนอกจอ
• transition: width 0.5s ease - ทำให้การเปลี่ยนแปลงความกว้างดูนุ่มนวล
• z-index: 1 - ทำให้เมนูอยู่เหนือเนื้อหาอื่นๆ
• JavaScript แค่เปลี่ยนค่า style.width ระหว่าง "0" และ "100%"

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

• เพิ่ม aria-label และ role="navigation" เพื่อเข้าถึงได้ (accessibility)
• รองรับการปิดเมนูด้วยปุ่ม Escape และการคลิกนอกพื้นที่เมนู
• ใช้ CSS custom properties สำหรับสีและขนาดเพื่อปรับแต่งง่ายขึ้น