การสร้าง Navigation Bar ด้วย HTML

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

โครงสร้างพื้นฐานของ Navigation Bar

Navigation Bar โดยทั่วไปจะใช้ List (รายการ) ใน HTML เพื่อจัดระเบียบลิงก์ต่างๆ List ที่ใช้บ่อยที่สุดคือ Unordered List (<ul>) เพราะเราไม่ต้องการให้ลำดับของลิงก์มีความสำคัญ

โครงสร้างพื้นฐานมีดังนี้:

<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>: เป็น Semantic Element (องค์ประกอบเชิงความหมาย) ที่ใช้เพื่อระบุส่วนที่เป็น Navigation ของเว็บไซต์ ช่วยให้โปรแกรมอ่านหน้าจอและ Search Engine เข้าใจโครงสร้างของเว็บไซต์ได้ดีขึ้น
• <ul>: Unordered List ใช้สำหรับสร้างรายการที่ไม่มีลำดับ
• <li>: List Item แต่ละรายการใน List
• <a href="#">: Anchor Tag ใช้สำหรับสร้างลิงก์ โดย href="#" หมายถึงลิงก์ไปยังหน้าปัจจุบัน (Placeholder) เราจะเปลี่ยน # เป็น URL จริงในภายหลัง

ลองคัดลอกโค้ดด้านบนไปวางในไฟล์ HTML ของคุณ แล้วเปิดใน Browser คุณจะเห็นรายการลิงก์แบบง่ายๆ

การใช้ CSS เพื่อจัดรูปแบบ Navigation Bar

ตอนนี้ Navigation Bar ของเรายังดูไม่สวยงาม เราจะใช้ CSS เพื่อปรับแต่งให้ดูดีขึ้น CSS จะช่วยให้เราควบคุมรูปลักษณ์ของ Navigation Bar ได้ เช่น สี, ขนาดตัวอักษร, ระยะห่าง, และการจัดวาง

เราจะเพิ่ม CSS ภายใน <style> tag ใน <head> ของไฟล์ HTML ของเรา (สำหรับบทนี้ เพื่อความง่ายในการเห็นภาพรวม) แต่ในโปรเจกต์จริง ควรแยก CSS ไปไว้ในไฟล์ CSS ภายนอก

<!DOCTYPE html>
<html>
<head>
  <title>Navigation Bar</title>
  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    nav li {
      float: left;
    }

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

    nav li a:hover {
      background-color: #ddd;
      color: black;
    }
  </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>

อธิบาย CSS:

• nav { background-color: #333; overflow: hidden; }: กำหนดสีพื้นหลังของ <nav> เป็นสีเทาเข้ม (#333) และ overflow: hidden; ป้องกันปัญหาการแสดงผลเมื่อ List Item มีขนาดใหญ่เกินไป
• nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }: ลบสัญลักษณ์หน้า List Item (จุด) และกำหนด Margin และ Padding เป็น 0 เพื่อให้ List Item ชิดขอบ และ overflow: hidden; ป้องกันปัญหาการแสดงผล
• nav li { float: left; }: จัดเรียง List Item ในแนวนอนโดยใช้ float: left;
• nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }: กำหนดให้ Link เป็น Block Element (display: block;) เพื่อให้สามารถกำหนด Padding ได้, กำหนดสีตัวอักษรเป็นสีขาว, จัดข้อความให้อยู่ตรงกลาง, กำหนด Padding เพื่อเพิ่มระยะห่างรอบข้อความ, และลบเส้นใต้ (text-decoration: none;)
• nav li a:hover { background-color: #ddd; color: black; }: กำหนดสีพื้นหลังและสีตัวอักษรเมื่อ Hover (เลื่อนเมาส์) เหนือ Link

ลองคัดลอกโค้ดทั้งหมดไปวางในไฟล์ HTML ของคุณ แล้วเปิดใน Browser คุณจะเห็น Navigation Bar ที่มีสีพื้นหลัง, ไม่มีสัญลักษณ์หน้า List Item, และมี Effect เมื่อ Hover

การสร้าง Navigation Bar ที่ตอบสนองต่อขนาดหน้าจอ (Responsive)

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

วิธีที่ง่ายที่สุดในการสร้าง Responsive Navigation Bar คือการใช้ Media Queries ใน CSS Media Queries ช่วยให้เราสามารถกำหนด CSS ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกันได้

เราจะเพิ่ม Media Query เพื่อให้ Navigation Bar แสดงผลเป็นแนวตั้งเมื่อหน้าจอมีขนาดเล็ก (เช่น บนโทรศัพท์มือถือ)

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Navigation Bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    nav li {
      float: left;
    }

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

    nav li a:hover {
      background-color: #ddd;
      color: black;
    }

    /* Media Query สำหรับหน้าจอขนาดเล็ก */
    @media screen and (max-width: 600px) {
      nav li {
        float: none;
      }
    }
  </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>

อธิบาย:

• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Meta Tag นี้สำคัญมากสำหรับการทำ Responsive Web Design มันจะบอก Browser ให้ปรับขนาดหน้าจอให้เหมาะสมกับขนาดของอุปกรณ์
• @media screen and (max-width: 600px) { ... }: Media Query นี้จะทำงานเมื่อหน้าจอมีขนาดไม่เกิน 600px
• nav li { float: none; }: ภายใน Media Query เรากำหนด float: none; ให้กับ List Item ซึ่งจะทำให้ List Item แสดงผลเป็นแนวตั้ง (วางซ้อนกัน)

ลองคัดลอกโค้ดทั้งหมดไปวางในไฟล์ HTML ของคุณ แล้วเปิดใน Browser จากนั้นลองปรับขนาดหน้าต่าง Browser ให้เล็กลง คุณจะเห็นว่า Navigation Bar เปลี่ยนเป็นแนวตั้งเมื่อหน้าจอมีขนาดเล็กกว่า 600px

กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

• การใช้ Semantic Elements ที่ถูกต้อง: ควรใช้ <nav> เพื่อห่อหุ้ม Navigation Bar เสมอ เพื่อให้ Search Engine และโปรแกรมอ่านหน้าจอเข้าใจโครงสร้างของเว็บไซต์
• การกำหนด Link ที่ถูกต้อง: ตรวจสอบให้แน่ใจว่า href attribute ของ <a> tag ชี้ไปยัง URL ที่ถูกต้อง
• การจัดการกับ Overflow: หาก List Item มีขนาดใหญ่เกินไป อาจทำให้ Navigation Bar แสดงผลไม่ถูกต้อง ควรใช้ overflow: hidden; เพื่อแก้ไขปัญหานี้
• การทดสอบบนอุปกรณ์จริง: ควรทดสอบ Navigation Bar บนอุปกรณ์จริง (เช่น โทรศัพท์มือถือและแท็บเล็ต) เพื่อให้แน่ใจว่าแสดงผลได้อย่างถูกต้อง
• ข้อผิดพลาดที่พบบ่อย: ลืมใส่ <meta name="viewport" content="width=device-width, initial-scale=1.0"> ทำให้เว็บไซต์ไม่ Responsive บนมือถือ

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