สร้างเมนูและการนำทางด้วย <nav> และ <ul>

4. สร้างเมนูและการนำทางด้วย <nav> และ <ul>

เมื่อคุณได้เรียนรู้พื้นฐานของ HTML แล้ว ขั้นตอนถัดไปคือการทำให้เว็บไซต์ของคุณไม่เพียงแค่ “ดูดี” แต่ยังใช้งานง่ายและเป็นมิตรกับผู้ใช้ทุกคน การสร้างเมนูนำทาง (navigation menu) เป็นหัวใจสำคัญที่ช่วยให้ผู้เยี่ยมชมเข้าใจโครงสร้างของไซต์ และสามารถเข้าถึงข้อมูลต่าง ๆ ได้อย่างรวดเร็ว

4.1 ทำไมต้องใช้ <nav>?

แท็ก `<nav>` ถูกออกแบบมาเพื่อกำหนดส่วนของหน้าเว็บที่เป็น “พื้นที่นำทาง” หรือ navigation area โดยมีข้อดีดังนี้:

• ความหมาย (semantic): เครื่องมือค้นหาและ screen readers จะรู้ว่าเนื้อหาภายในแท็กนี้เป็นเมนูหรือรายการลิงก์หลัก
• SEO ช่วยเพิ่มประสิทธิภาพ: การระบุ `<nav>` ให้กับเครื่องมือค้นหาช่วยให้เข้าใจโครงสร้างเว็บไซต์ได้ดีขึ้น และอาจส่งผลต่ออันดับของหน้าในผลการค้นหา
• สามารถปรับแต่ง CSS ได้ง่ายขึ้น: เมื่อคุณกำหนดสไตล์สำหรับ `<nav>` คุณจะไม่ต้องคัดลอกหรือเขียนโค้ดซ้ำ ๆ สำหรับแต่ละเมนูที่อาจมีอยู่หลายส่วนในหน้าเว็บเดียวกัน

4.2 สร้างเมนูพื้นฐานด้วย <ul> และ <li>

แท็ก `<ul>` (unordered list) เป็นวิธีง่าย ๆ ในการจัดกลุ่มรายการที่ไม่จำเป็นต้องเรียงลำดับ เช่น เมนูหลักของเว็บไซต์ ส่วน `<li>` จะใช้เพื่อแสดงแต่ละตัวเลือกในเมนูนั้น ๆ

โครงสร้างพื้นฐานของเมนู

<nav>
  <ul class="main-menu">
    <li><a href="/home" title="หน้าแรก">Home</a></li>
    <li><a href="/about" title="เกี่ยวกับเรา">About</a></li>
    <li><a href="/services" title="บริการของเรา">Services</a></li>
    <li><a href="/contact" title="ติดต่อเรา">Contact</a></li>
  </ul>
</nav>

ในตัวอย่างข้างต้น เราได้ทำการกำหนดคลาส “main-menu” ให้กับ `<ul>` เพื่อให้สามารถนำ CSS ไปใช้จัดรูปแบบเมนูโดยตรง โดยไม่กระทบกับส่วนอื่น ๆ ของหน้าเว็บ

การเพิ่มลิงก์ที่มีประโยชน์ (anchor link)

หากคุณต้องการสร้างเมนูที่ทำงานเป็น “scroll to section” บนหน้าต่างเดียวกัน คุณสามารถใช้ attribute `href` พร้อมกับ ID ของส่วนที่ต้องการเชื่อมต่อได้ เช่น

<nav>
  <ul class="single-page-menu">
    <li><a href="#intro" title="แนะนำ">Intro</a></li>
    <li><a href="#features" title="คุณสมบัติ">Features</a></li>
    <li><a href="#contact" title="ติดต่อเรา">Contact</a></li>
  </ul>
</nav>

โดยในส่วนอื่นของ HTML คุณต้องมีแท็กที่กำหนด `id` เช่น

<section id="intro">...</section>
<section id="features">...</section>
<section id="contact">...</section>

4.3 การจัดรูปแบบเมนูด้วย CSS (ตัวอย่างเบื้องต้น)

หลังจากสร้างโครงสร้าง HTML แล้ว ขั้นตอนต่อไปคือการทำให้เมนูกระจายออกเป็นแนวนอนและมีสไตล์ที่ดูดี

.main-menu {
  list-style: none;          /* ลบเครื่องหมายหัวข้อ */
  margin: 0;
  padding: 0;
  display: flex;             /* แสดงรายการในรูปแบบแถว (row) */
}

.main-menu li {
  margin-right: 20px;        /* ช่องว่างระหว่างเมนูแต่ละตัว */
}

.main-menu a {
  text-decoration: none;     /* ลบขีดเส้นใต้ของลิงก์ */
  color: #333;
  font-weight: bold;
  transition: color 0.3s ease;
}

.main-menu a:hover,
.main-menu a:focus {
  color: #007BFF;            /* เปลี่ยนสีเมื่อลากหรือโฟกัส */
}

สไตล์นี้ทำให้เมนูของคุณดูเรียบง่าย แต่มีความเป็นมืออาชีพ และสามารถปรับเปลี่ยนได้ตามต้องการ เช่น การเพิ่ม background สี หรือ transition ต่าง ๆ

4.4 เมนูแบบ Responsive (สำหรับมือถือ)

เว็บไซต์สมัยใหม่ควรรองรับการแสดงผลบนอุปกรณ์ทุกขนาด หนึ่งในวิธีที่ง่ายที่สุดคือการใช้ media query เพื่อตรวจจับขนาดหน้าจอและปรับเปลี่ยนรูปแบบเมนู

@media (max-width: 768px) {
  .main-menu {
    flex-direction: column;   /* แสดงรายการในแนวตั้ง */
  }
  
  .main-menu li {
    margin-bottom: 10px;
  }
}

เมื่อหน้าจอมีความกว้างน้อยกว่า 768 พิกเซล เมนูจะเปลี่ยนจากแนวนอนเป็นแนวตั้ง ทำให้ผู้ใช้มือถือสามารถเลื่อนเมนูได้ง่ายขึ้น

4.5 การเพิ่มเมนูย่อย (Dropdown)

สำหรับเว็บไซต์ที่มีหลายหมวดหมู่หรือเนื้อหายาว คุณอาจต้องการเมนูย่อยซึ่งแสดงเมื่อผู้ใช้ hover หรือคลิกบนเมนูหลัก ตัวอย่างโครงสร้าง HTML:

<nav>
  <ul class="main-menu">
    <li><a href="/home" title="หน้าแรก">Home</a></li>
    <li class="dropdown">
      <a href="#" title="บริการของเรา">Services</a>
      <ul class="submenu">
        <li><a href="/services/web" title="พัฒนาเว็บ">Web Development</a></li>
        <li><a href="/services/mobile" title="พัฒนามือถือ">Mobile Apps</a></li>
      </ul>
    </li>
    <li><a href="/contact" title="ติดต่อเรา">Contact</a></li>
  </ul>
</nav>

และ CSS ที่ทำให้เมนูย่อยแสดงขึ้นเมื่อ hover:

.dropdown {
  position: relative;
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;       /* ตำแหน่งแบบ absolute เพื่อแสดงด้านล่างเมนูหลัก */
  top: 100%;                /* อยู่ใต้เมนูหลัก */
  left: 0;
  background-color: #fff;
  min-width: 150px;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  display: none;           /* เริ่มซ่อนอยู่ */
}

.dropdown:hover .submenu,
.dropdown:focus-within .submenu {
  display: block;          /* แสดงเมนูย่อยเมื่อ hover หรือ focus */
}

.submenu li a {
  padding: 10px 15px;
  display: block;
  color: #333;
}

วิธีนี้ทำให้เมนูของคุณมีความยืดหยุ่นและสามารถจัดการกับเนื้อหาย่อยได้อย่างง่ายดาย

4.6 การใช้ ARIA เพื่อเพิ่ม Accessibility

เมื่อสร้างเมนู dropdown หรือเมนูซับหลายระดับ ควรให้ข้อมูลเพิ่มเติมแก่ screen readers ด้วย attribute ของ ARIA เช่น `aria-haspopup`, `aria-expanded` และ `role="menu"`:

<li class="dropdown" aria-haspopup="true" aria-expanded="false">
  <a href="#" title="บริการของเรา">Services</a>
  <ul class="submenu" role="menu">
    ...
  </ul>
</li>

โดยคุณอาจใช้ JavaScript เพื่อสลับค่า `aria-expanded` เมื่อผู้ใช้คลิกหรือ hover

4.7 สรุปขั้นตอนสร้างเมนูนำทาง (Checklist)

1. กำหนด `<nav>` เป็นพื้นที่หลักของเมนู
2. ใช้ `<ul>` และ `<li>` เพื่อจัดกลุ่มรายการเมนู
3. เพิ่มลิงก์ `<a>` ให้แต่ละรายการเพื่อเชื่อมโยงไปยังหน้าเว็บหรือส่วนต่าง ๆ ของหน้าเดียวกัน
4. กำหนดคลาส (เช่น `main-menu`, `submenu`) เพื่อจัดสไตล์ด้วย CSS อย่างเป็นระบบ
5. ใช้ media query เพื่อตอบสนองต่ออุปกรณ์ที่มีขนาดหน้าจอต่าง ๆ
6. เพิ่มเมนูย่อยหรือ dropdown หากเว็บไซต์ต้องการความลึกในเนื้อหา
7. เพิ่ม ARIA attributes เพื่อให้ผู้ใช้ที่พึ่งพา screen reader เข้าใจโครงสร้างของเมนูได้ดีขึ้น
8. ทดสอบบนหลายเบราว์เซอร์และอุปกรณ์เพื่อยืนยันความสอดคล้อง (cross‑browser compatibility)

เมื่อคุณทำตามขั้นตอนนี้แล้ว เมนูของเว็บไซต์จะไม่เพียงแค่ “ดูดี” แต่ยังเป็นระบบที่ผู้ใช้สามารถนำทางได้อย่างราบรื่น ทั้งในมุมมองด้าน UX, SEO และ Accessibility

ต่อไป: เพิ่มภาพและสื่ออื่น ๆ ในหน้า HTML (บทถัดไป)

หลังจากเราเรียนรู้วิธีสร้างเมนูหลักแล้ว ขั้นตอนต่อไปคือการเพิ่มองค์ประกอบทางสายตา เช่น รูปภาพ ไฟล์เสียง หรือวิดีโอ เพื่อทำให้เว็บไซต์มีชีวิตชีวามากขึ้น และช่วยเสริมประสบการณ์ผู้ใช้ (UX) ให้ดียิ่งขึ้น