สร้างเมนูนำทาง (Navigation Menu) แบบง่ายๆ

สวัสดีครับ! ในบทเรียนที่แล้ว เราได้เรียนรู้วิธีการใช้ CSS เพื่อตกแต่งและจัดรูปแบบหน้าเว็บของเราให้สวยงามและน่าใช้งานมากยิ่งขึ้น ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการสร้างเมนูนำทาง (Navigation Menu) ซึ่งเป็นส่วนประกอบสำคัญที่ช่วยให้ผู้ใช้งานสามารถเข้าถึงส่วนต่างๆ ของเว็บไซต์ของเราได้อย่างง่ายดาย เหมือนกับป้ายบอกทางในห้างสรรพสินค้าที่ช่วยให้เราหาของได้ง่ายขึ้นนั่นเอง

เมนูนำทางที่ดีควรจะ:

ใช้งานง่าย: ผู้ใช้งานควรจะสามารถเข้าใจได้ทันทีว่าแต่ละเมนูจะพาไปยังส่วนไหนของเว็บไซต์
เห็นได้ชัดเจน: เมนูควรจะอยู่ในตำแหน่งที่มองเห็นได้ง่าย และมีการออกแบบที่โดดเด่น
ตอบสนอง (Responsive): เมนูควรจะปรับตัวให้เข้ากับขนาดหน้าจอต่างๆ ได้อย่างเหมาะสม ไม่ว่าจะเป็นบนคอมพิวเตอร์, แท็บเล็ต, หรือโทรศัพท์มือถือ

องค์ประกอบ HTML ที่ใช้ในการสร้างเมนูนำทาง

ในการสร้างเมนูนำทาง เราจะใช้แท็ก HTML หลักๆ 4 แท็กด้วยกัน:

<nav>: แท็กนี้ใช้เพื่อกำหนดส่วนที่เป็นเมนูนำทางของเว็บไซต์ เป็นเหมือน "กรอบ" ที่บอกว่าส่วนนี้คือเมนู
<ul>: ย่อมาจาก "Unordered List" หรือรายการที่ไม่มีลำดับ ใช้เพื่อสร้างรายการของเมนู (ในทางปฏิบัติ เราสามารถใช้ <ol> หรือ "Ordered List" สำหรับเมนูที่มีลำดับความสำคัญได้ แต่ส่วนใหญ่นิยมใช้ <ul>)
<li>: ย่อมาจาก "List Item" หรือรายการแต่ละรายการ ใช้เพื่อสร้างแต่ละเมนูในรายการ
<a>: ย่อมาจาก "Anchor" ใช้เพื่อสร้างลิงก์ไปยังหน้าต่างๆ ของเว็บไซต์

ลองดูตัวอย่างโครงสร้าง HTML ของเมนูนำทางแบบง่ายๆ:

<nav>
  <ul>
    <li><a href="#">หน้าแรก</a></li>
    <li><a href="#">เกี่ยวกับเรา</a></li>
    <li><a href="#">บริการ</a></li>
    <li><a href="#">ติดต่อเรา</a></li>
  </ul>
</nav>

คำอธิบาย:

<nav> ครอบทั้งหมด เพื่อบอกว่านี่คือส่วนของเมนู
<ul> สร้างรายการเมนู
<li> แต่ละ <li> คือแต่ละเมนู เช่น "หน้าแรก", "เกี่ยวกับเรา"
<a href="#"> สร้างลิงก์ไปยังหน้าที่เราต้องการ (ในตัวอย่างนี้ใช้ # ซึ่งหมายถึง "ลิงก์ไปยังหน้าปัจจุบัน" เราจะเปลี่ยนเป็น URL จริงในภายหลัง)

CSS สำหรับตกแต่งเมนูนำทาง

ตอนนี้เรามีโครงสร้าง HTML แล้ว ขั้นตอนต่อไปคือการใช้ CSS เพื่อตกแต่งเมนูของเราให้สวยงามและน่าใช้งานยิ่งขึ้น เราจะเริ่มจากการลบสัญลักษณ์หัวข้อย่อย (bullet points) ที่มาจาก <ul> ออกก่อน:

nav ul {
  list-style-type: none; /* ลบสัญลักษณ์หัวข้อย่อย */
  margin: 0;           /* ลบระยะขอบ (margin) */
  padding: 0;          /* ลบระยะห่างภายใน (padding) */
  overflow: hidden;     /* ป้องกันการแสดงผลเกินขอบเขต */
  background-color: #f2f2f2; /* กำหนดสีพื้นหลัง */
}

คำอธิบาย:

nav ul: เลือก <ul> ที่อยู่ภายใน <nav>
list-style-type: none;: ลบสัญลักษณ์หัวข้อย่อย
margin: 0;: ลบระยะขอบด้านนอก
padding: 0;: ลบระยะห่างภายใน
overflow: hidden;: ป้องกันไม่ให้เนื้อหาล้นออกมา
background-color: #f2f2f2;: กำหนดสีพื้นหลังเป็นสีเทาอ่อน

จากนั้น เราจะจัดเรียงเมนูให้แสดงผลในแนวนอน โดยการใช้ float: left; กับแต่ละ <li>:

nav li {
  float: left; /* จัดเรียงในแนวนอน */
}

และสุดท้าย เราจะตกแต่งลิงก์ <a> ให้มีขนาดที่เหมาะสม, มีสีที่น่าสนใจ, และมีการตอบสนองเมื่อผู้ใช้งานนำเมาส์ไปวาง:

nav li a {
  display: block;       /* ทำให้ลิงก์เต็มพื้นที่ของ <li> */
  color: #333;         /* กำหนดสีตัวอักษร */
  text-align: center;   /* จัดข้อความให้อยู่ตรงกลาง */
  padding: 14px 16px;   /* กำหนดระยะห่างภายใน */
  text-decoration: none; /* ลบเส้นใต้ */
}

nav li a:hover {
  background-color: #ddd; /* เปลี่ยนสีพื้นหลังเมื่อนำเมาส์ไปวาง */
}

คำอธิบาย:

display: block;: ทำให้ลิงก์แสดงผลเป็นแบบ "Block" ซึ่งจะทำให้ลิงก์เต็มพื้นที่ของ <li>
color: #333;: กำหนดสีตัวอักษรเป็นสีเทาเข้ม
text-align: center;: จัดข้อความให้อยู่ตรงกลาง
padding: 14px 16px;: กำหนดระยะห่างภายใน (บน-ล่าง 14px, ซ้าย-ขวา 16px)
text-decoration: none;: ลบเส้นใต้ที่ปกติจะปรากฏบนลิงก์
nav li a:hover: เลือกเฉพาะลิงก์ที่อยู่ภายใน <li> ที่อยู่ภายใน <nav> เมื่อมีการนำเมาส์ไปวาง
background-color: #ddd;: เปลี่ยนสีพื้นหลังเป็นสีเทาอ่อนเมื่อนำเมาส์ไปวาง

ลองนำโค้ด HTML และ CSS ทั้งหมดมารวมกัน แล้วลองเปิดใน Browser ดู คุณจะได้เมนูนำทางแบบง่ายๆ ที่มีลักษณะดังนี้:

<!DOCTYPE html>
<html>
<head>
  <title>เมนูนำทางแบบง่ายๆ</title>
  <style>
    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f2f2f2;
    }

    nav li {
      float: left;
    }

    nav li a {
      display: block;
      color: #333;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    nav li a:hover {
      background-color: #ddd;
    }
  </style>
</head>
<body>

  <nav>
    <ul>
      <li><a href="#">หน้าแรก</a></li>
      <li><a href="#">เกี่ยวกับเรา</a></li>
      <li><a href="#">บริการ</a></li>
      <li><a href="#">ติดต่อเรา</a></li>
    </ul>
  </nav>

</body>
</html>

การทำเมนูให้ Responsive

ในยุคที่ผู้คนเข้าถึงเว็บไซต์ผ่านอุปกรณ์หลากหลายขนาด การทำเมนูให้ "Responsive" หรือปรับตัวให้เข้ากับขนาดหน้าจอต่างๆ ได้อย่างเหมาะสมจึงเป็นสิ่งสำคัญ

วิธีที่ง่ายที่สุดวิธีหนึ่งในการทำเมนูให้ Responsive คือการเปลี่ยนเมนูจากแนวนอนเป็นแนวตั้งเมื่อหน้าจอมีขนาดเล็กลง โดยเราจะใช้ Media Queries ซึ่งเป็นคุณสมบัติ CSS ที่ช่วยให้เรากำหนดรูปแบบ CSS ที่แตกต่างกันไปตามขนาดหน้าจอ

เราจะเพิ่มโค้ด CSS ดังต่อไปนี้:

@media screen and (max-width: 600px) {
  nav li {
    float: none; /* ยกเลิกการจัดเรียงในแนวนอน */
  }
}

คำอธิบาย:

@media screen and (max-width: 600px): หมายถึง "เมื่อหน้าจอมีขนาดไม่เกิน 600 พิกเซล" (เช่น หน้าจอโทรศัพท์มือถือ)
nav li { float: none; }: ยกเลิกการจัดเรียงในแนวนอน ทำให้เมนูแสดงผลในแนวตั้ง

เมื่อนำโค้ดนี้ไปใส่ใน <style> tag และลองเปิดเว็บไซต์บนหน้าจอที่มีขนาดเล็กกว่า 600 พิกเซล (เช่น โดยการย่อขนาดหน้าต่าง Browser) คุณจะเห็นว่าเมนูเปลี่ยนเป็นแนวตั้งโดยอัตโนมัติ

ข้อผิดพลาดที่พบบ่อย

ลืมใส่ list-style-type: none;: ทำให้ยังมีสัญลักษณ์หัวข้อย่อยปรากฏอยู่
ลืมใส่ margin: 0; และ padding: 0;: ทำให้มีระยะขอบที่ไม่ต้องการ
ลืมใส่ display: block; ใน nav li a: ทำให้ลิงก์ไม่เต็มพื้นที่ของ <li>
ไม่ได้ทดสอบบนอุปกรณ์ต่างๆ: ทำให้เมนูแสดงผลไม่ถูกต้องบนบางอุปกรณ์

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการสร้างเมนูนำทางแบบง่ายๆ โดยใช้ HTML และ CSS ตั้งแต่การสร้างโครงสร้าง, การตกแต่ง, และการทำเมนูให้ Responsive หวังว่าบทเรียนนี้จะเป็นประโยชน์และช่วยให้คุณสามารถสร้างเมนูนำทางที่สวยงามและใช้งานง่ายสำหรับเว็บไซต์ของคุณได้นะครับ ในบทเรียนต่อไป เราจะมาเรียนรู้วิธีการเพิ่มรูปภาพและไฟล์สื่อต่างๆ ลงในเว็บไซต์ของเรากันครับ