HTML
Layout
Navigation Menu
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า navigation menu คือกลุ่มลิงก์ที่ช่วยพาผู้ใช้ไปยังส่วนต่าง ๆ ของเว็บไซต์ โดยมักใช้ `nav`, `ul`, `li`, `a` ร่วมกัน เพื่อให้เมนูมีโครงสร้าง HTML ที่ชัดเจนและต่อยอด CSS ได้ง่าย
1. หัวข้อนี้คืออะไร
navigation menu คือส่วนของหน้าเว็บที่ช่วยให้ผู้ใช้ไปยังหน้าหรือส่วนต่าง ๆ ของเว็บไซต์ได้ง่ายขึ้น เมนูนำทางไม่ใช่แค่ข้อความเรียงกัน แต่เป็นกลุ่มลิงก์ที่ถูกจัดอย่างเป็นระบบ เพื่อบอกผู้ใช้ว่าเขาสามารถไปที่ไหนต่อได้บ้าง
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้หาทางไปยังหน้าต่าง ๆ ของเว็บไซต์ได้ง่ายขึ้น
- ทำให้หน้าเว็บเป็นระบบและอ่านโครงสร้างได้ชัดเจน
- ช่วยให้ทีมพัฒนาดูแลเมนูได้ง่าย เพราะโครงสร้าง HTML มีความหมายชัดเจน
- ช่วยให้ต่อยอด CSS และการจัดวางเมนูในอนาคตได้ง่ายขึ้น
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - เมนูเว็บบริษัทที่มี หน้าแรก บริการ เกี่ยวกับเรา ติดต่อ - เมนูคอร์สหรือ docs ที่พาผู้ใช้ไปยังบทต่าง ๆ - เมนูร้านค้าออนไลน์ที่แบ่งหมวดสินค้า - เมนูบน blog หรือ landing page ที่พาไปยังส่วนสำคัญของหน้า ทุกกรณีนี้คือกลุ่มลิงก์นำทางที่ควรมีโครงสร้างชัดเจน ไม่ใช่แค่เอาข้อความมาเรียงต่อกันเฉย ๆ
4. แนวคิดหลักที่ต้องเข้าใจ
- เมนูคือกลุ่มลิงก์นำทาง ไม่ใช่ข้อความธรรมดาที่วางเรียงกัน
- ควรใช้ `nav` ครอบกลุ่มลิงก์หลัก เพื่อบอกว่าส่วนนี้คือเมนูนำทาง
- `ul` และ `li` เหมาะกับเมนู เพราะเมนูเป็นรายการที่มีหลายข้อ
- แต่ละรายการของเมนูมักใช้ `a` เพื่อพาผู้ใช้ไปยังหน้าอื่นหรือส่วนอื่นของหน้า
- เมนูที่ดีเริ่มจากโครงสร้าง HTML ที่เหมาะสมก่อน แล้วค่อยตกแต่งด้วย CSS
5. การทำงานทีละขั้นตอน
- 1) ระบุก่อนว่าหน้านี้มีเมนูนำทางอะไรบ้าง เช่น หน้าแรก บทเรียน ติดต่อ
- 2) ครอบเมนูด้วย `nav` เพื่อกำหนดบทบาทของส่วนนี้ให้ชัดเจน
- 3) สร้างรายการเมนูด้วย `ul` และ `li`
- 4) ใส่ลิงก์ `a` ในแต่ละรายการเพื่อให้กดไปยังหน้าหรือส่วนที่ต้องการได้
- 5) เมื่อโครงสร้างชัดแล้ว ค่อยต่อยอด CSS เพื่อจัดตำแหน่งหรือรูปแบบเมนู
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้เป็นเมนูนำทางพื้นฐานที่ใช้ `nav + ul + li + a` ครบชุด โดยมี 4 รายการ เพื่อให้เห็นชัดว่าเมนูที่ดีเริ่มจากโครงสร้าง HTML ที่เป็นระบบก่อน CSS ที่ใส่มีแค่ระดับพื้นฐานเพื่อช่วยให้เมนูอ่านง่ายขึ้น ไม่ใช่ประเด็นหลักของบทนี้
7. จุดที่ผู้เริ่มต้นมักสับสน
- เอาข้อความธรรมดามาเรียงกันแต่ไม่ใช้ลิงก์ ทำให้มันไม่ใช่เมนูนำทางจริง
- ใช้ `div` กับ `a` แบบกระจัดกระจายจนโครงสร้างอ่านยาก
- ลืมใช้ `ul` และ `li` ทั้งที่เมนูเป็นรายการหลายข้อ
- คิดว่า `nav` ใช้แทนลิงก์ทุกชนิดในหน้า ทั้งที่จริงควรใช้กับกลุ่มลิงก์นำทางหลัก
- วางเมนูโดยไม่มีโครงสร้างชัดเจน ทำให้แก้ไขและตกแต่งต่อยาก
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `nav` menu vs ข้อความลิงก์เรียงกัน | nav menu เป็นกลุ่มลิงก์ที่มีโครงสร้างชัดเจน ส่วนข้อความลิงก์เรียงกันมักไม่มีกรอบความหมายของเมนู | ถ้าต้องการเมนูนำทางหลัก ควรใช้ nav menu |
| `nav + ul/li/a` vs `div + a` แบบไม่เป็นระบบ | โครงสร้างแบบ nav + ul/li/a อ่านง่ายและเป็นระบบกว่า ส่วน div + a ที่กระจัดกระจายตีความยากกว่า | เมื่อต้องการเมนูหลายรายการ ควรใช้ ul/li/a ภายใน nav |
| เมนูนำทาง vs ลิงก์อ้างอิงในเนื้อหา | เมนูนำทางใช้พาผู้ใช้ไปยังส่วนสำคัญของเว็บไซต์ ส่วนลิงก์อ้างอิงในเนื้อหาเป็นข้อมูลประกอบ | ถ้าเป็นกลุ่มลิงก์หลักให้ใช้ nav แต่ถ้าเป็นลิงก์อ้างอิงทั่วไปใช้ a ปกติได้ |
9. สรุปท้ายบทแบบจำง่าย
- เมนูคือกลุ่มลิงก์นำทางของเว็บไซต์
- ใช้ `nav` ครอบกลุ่มลิงก์หลักเพื่อบอกบทบาทให้ชัดเจน
- ใช้ `ul` และ `li` เพราะเมนูเป็นรายการหลายข้อ
- ใช้ `a` เป็นตัวพาผู้ใช้ไปยังหน้าอื่นหรือส่วนอื่น
- เริ่มจากโครงสร้าง HTML ที่ดี ก่อนค่อยตกแต่งด้วย CSS
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อให้เข้าใจว่าเมนูนำทางควรมีโครงสร้างอย่างไร ตั้งแต่การสร้างเมนูพื้นฐาน ไปจนถึงการแก้โค้ดที่ใช้ `div` และ `a` แบบไม่เป็นระบบให้กลายเป็น nav menu ที่เหมาะสม
Lab 1 (พื้นฐาน): สร้างเมนูนำทางพื้นฐาน
ชื่อ Lab: สร้างเมนูพื้นฐาน เป้าหมาย: สร้างเมนูนำทางด้วย `nav`, `ul`, `li`, `a` โจทย์: ให้สร้าง <nav id="main-menu"> ภายในมี <ul> และมี <li><a> อย่างน้อย 3 รายการ โดยต้องมีข้อความลิงก์ว่า หน้าแรก, บทเรียน และ ติดต่อ เงื่อนไข: ต้องมี nav 1 ตัว, ul 1 ตัว และ a อย่างน้อย 3 ตัวภายในโครงสร้างเมนู สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content, attribute value และ browser runtime แนวทางการคิด: วาง nav ก่อน -> สร้างรายการเมนู -> ใส่ลิงก์แต่ละข้อ
Lab 2 (กลาง): เพิ่มลิงก์หลายรายการให้ครบโครงสร้าง
ชื่อ Lab: เติมรายการเมนูให้ครบขึ้น เป้าหมาย: สร้างเมนูที่มีหลายรายการและมี href ครบ โจทย์: ให้สร้าง <nav id="site-menu"> ที่ภายในมี 4 รายการคือ เกี่ยวกับเรา, คอร์ส, บทความ, ติดต่อ และลิงก์ทุกตัวต้องมี href ที่ไม่ว่าง เงื่อนไข: ต้องมี li 4 ตัว และ a 4 ตัว โดยแต่ละ a ต้องอยู่ภายใน li สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content, attribute value และ browser runtime แนวทางการคิด: สร้าง nav -> ใส่ ul -> สร้าง li ทีละรายการ -> เติม a พร้อม href
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ div/a แบบไม่เป็นระบบให้เป็น nav menu ที่เหมาะสม
ชื่อ Lab: แปลงโค้ดเมนูให้เป็นระบบ เป้าหมาย: เปลี่ยนโค้ดที่ใช้ div และ a แบบกระจัดกระจายให้เป็น nav menu ที่เหมาะสม โจทย์: จากโค้ดตั้งต้น ให้แปลงเมนูที่มีข้อความ Home, Blog, Contact ให้กลายเป็น `nav > ul > li > a` โดยคงข้อความเดิมไว้ครบ เงื่อนไข: ต้องมี nav 1 ตัว, ul 1 ตัว, li 3 ตัว และ a 3 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, text content, attribute value และ browser runtime แนวทางการคิด: เก็บข้อความเดิมไว้ -> ย้าย a เข้า li -> ย้าย li เข้า ul -> ครอบทั้งหมดด้วย nav