รวมทุกอย่างเข้าด้วยกัน

ในฐานะ designer คุณคงเคยมองดู hamburger menu แล้วคิดว่า: “การคลิกปุ่มเดียวทำให้รายการลิงก์ปรากฏขึ้นมาได้อย่างไร?” คำตอบนั้นง่ายกว่าที่คิด — และคุณก็รู้ทุกชิ้นส่วนแล้ว บทเรียนนี้คือการนำทุกอย่างมาประกอบกันให้ได้ผลลัพธ์จริง

Pattern: สามเครื่องมือ, ผลลัพธ์เดียว

ทุก UI component ที่มีการโต้ตอบบนเว็บใช้ workflow ในลักษณะนี้:

ค้นหา element — querySelector
รอรับ action — addEventListener
เปลี่ยน class — classList.toggle

แค่นั้นเอง ไม่ว่าจะเป็น tab switcher, modal dialog, accordion หรือ theme toggle — ทั้งหมดเดินตามจังหวะเดียวกัน เมื่อคุณเข้าใจ pattern นี้แล้ว คุณนำไปใช้ได้ทุกที่

เราจะสร้าง nav menu ที่เปิดและปิดได้เมื่อคลิกปุ่ม นี่คือหัวใจสำคัญ: JavaScript ทำหน้าที่แค่ toggle class เท่านั้น ส่วน CSS เป็นตัวจัดการการแสดงและซ่อน นี่คือวิธีสร้าง interaction แบบมืออาชีพและสะอาด — เก็บ visual logic ไว้ใน CSS และ behavioral logic ไว้ใน JS

<button id="menuBtn" aria-expanded="false">Menu</button>
<nav id="menu" class="menu">
  <a href="#">Home</a>
  <a href="#">Work</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

อ่านโค้ดทีละส่วน

นี่คือสิ่งที่แต่ละส่วนทำ:

บรรทัดที่ 1–2 ดึงการอ้างอิงไปยังปุ่มและ nav โดยใช้ querySelector ลองคิดว่านี่คือการตั้งชื่อให้ element เพื่อให้ JavaScript เรียกใช้ได้

บรรทัดที่ 4 ตั้ง click listener บนปุ่ม ทุกครั้งที่มีคนคลิก function ก็จะทำงาน

บรรทัดที่ 5 เรียก classList.toggle('open') ถ้า menu ยังไม่มี class open ก็จะเพิ่มให้ ถ้ามีอยู่แล้วก็จะลบออก เพียงบรรทัดเดียว — จบ

บรรทัดที่ 6–10 ตรวจสอบว่าตอนนี้ menu เปิดหรือปิดอยู่ จากนั้นอัปเดต label ของปุ่มให้แสดงข้อความที่ถูกต้องเสมอ นี่คือ good practice: UI ของคุณควรสะท้อนสถานะปัจจุบันของตัวเอง

ในส่วน CSS นั้น .menu เริ่มต้นด้วย display: none เมื่อ class open ถูกเพิ่มเข้ามา .menu.open จะทำงานด้วย display: flex — และ nav ก็ปรากฏขึ้น เมื่อ class ถูกลบออก nav ก็หายไปอีกครั้ง JavaScript ไม่แตะ display โดยตรงเลย นั่นคือหน้าที่ของ CSS

คุณเพิ่งสร้างสิ่งที่มือโปรสร้าง

นี่ไม่ใช่การพูดให้ฟังดูดี เปิด source code ของเว็บไซต์ production เกือบทุกแห่งแล้วคุณจะพบ pattern นี้: ปุ่มหนึ่งปุ่ม, การ toggle class, และ CSS จัดการส่วนที่เหลือ Framework อย่าง React และ Vue ห่อหุ้มไว้ในระดับนามธรรม แต่แนวคิดพื้นฐานก็เหมือนกันทุกประการ

นี่คือ pattern เดียวกับที่เว็บไซต์จริงทุกแห่งใช้ — และตอนนี้คุณก็รู้วิธีสร้างแล้ว

สามเครื่องมือที่คุณรวมกันในบทเรียนนี้ — querySelector, addEventListener, classList.toggle — คือรากฐานของ frontend interactivity ทุกอย่างที่เหลือสร้างขึ้นมาจากสิ่งเหล่านี้

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

design animation ที่ซับซ้อนเกินกว่าจะ implement ได้จริงในเวลาที่มี
ลืมออกแบบ disabled/loading state ของปุ่มระหว่างรอ action เสร็จ

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “คลิกแล้ว modal เด้งขึ้นสวย ๆ” แต่ developer ต้องจัดการทั้ง state ก่อน-ระหว่าง-หลัง action (loading spinner, error handling, success feedback) ไม่ใช่แค่ animation เดียว

💡 ตัวอย่างจากของจริง

ปุ่ม “Save” ของ Notion เปลี่ยนเป็น spinner แล้วเป็น checkmark ทำให้ user มั่นใจว่า action สำเร็จ โดยไม่ต้อง reload หน้า