Tailwind CSS Academy · บทเรียน

การสร้างแถบนำทางแบบตอบสนอง

สร้างแถบนำทางแนวนอนที่มีโลโก้ ลิงก์ และ CTA ซึ่งยุบเป็นเมนูแฮมเบอร์เกอร์บนอุปกรณ์เคลื่อนที่ด้วยยูทิลิตี hidden และ flex แบบตอบสนอง

บทเรียน 1 จาก 413 ขั้นตอน

การสร้างแถบนำทางแบบตอบสนอง เป็นบทเรียน Tailwind CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Tailwind CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

ส่วนประกอบของแถบนำทาง

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

โครงของแถบนำทางใช้ flex items-center justify-between เพื่อกระจายพื้นที่ทั้งสามส่วนในแนวนอน และใช้ px-6 py-4 เพื่อให้มีระยะห่างภายในที่พอดี

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
  <!-- Logo -->
  <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
  <!-- Nav links (hidden on mobile) -->
  <div class="hidden md:flex items-center gap-6">...</div>
  <!-- CTA -->
  <button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>

พื้นที่โลโก้และแบรนด์

พื้นที่โลโก้โดยทั่วไปคือแท็กจุดยึดที่ครอบโลโก้ SVG หรือชื่อแบรนด์แบบข้อความ ใช้ flex items-center gap-2 เมื่อรวมไอคอนกับข้อความ เพื่อให้ทั้งสองจัดแนวในแนวตั้ง

ใช้แบบอักษรหนาสำหรับโลโก้และใช้สีหลักของแบรนด์: font-bold text-xl text-blue-600 ทำให้แท็กจุดยึดรองรับการโฟกัสด้วยแป้นพิมพ์ โดยใช้รูปแบบการโฟกัส focus:outline-none focus-visible:ring-2

<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
  <svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
  </svg>
  <span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>

ลิงก์การนำทางบนเดสก์ท็อป

ลิงก์การนำทางบนเดสก์ท็อปอยู่ภายในตัวครอบ hidden md:flex items-center gap-6 ซึ่งจะมองไม่เห็นบนหน้าจอขนาดเล็ก และแสดงเป็นแถวแบบ flex ตั้งแต่หน้าจอขนาดกลางขึ้นไป ลิงก์แต่ละรายการใช้ text-sm font-medium text-gray-600 hover:text-gray-900 เพื่อให้มีรูปแบบเริ่มต้นที่เรียบง่ายและเข้มขึ้นเมื่อวางเมาส์เหนือ

เพิ่ม transition-colors duration-150 เพื่อให้สีเปลี่ยนอย่างราบรื่นเมื่อวางเมาส์เหนือ และใช้สีข้อความหรือเส้นใต้ที่แตกต่างกันเพื่อระบุหน้าปัจจุบัน

<div class="hidden md:flex items-center gap-6">
  <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
  <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
  <a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
  <a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>

CTA บนเดสก์ท็อปและปุ่มเข้าสู่ระบบ

ด้านขวาของแถบนำทางโดยทั่วไปจะมีลิงก์แบบโปร่งสำหรับ เข้าสู่ระบบ และปุ่มทึบสำหรับ สมัครสมาชิก การครอบทั้งสองด้วย hidden md:flex items-center gap-3 จะซ่อนไว้บนอุปกรณ์เคลื่อนที่และจัดแนวให้เรียบร้อยบนเดสก์ท็อป

การใช้ปุ่มทั้งสองร่วมกันช่วยสร้างลำดับความสำคัญที่ชัดเจน โดยลิงก์แบบโปร่งเหมาะสำหรับผู้ใช้เดิม และปุ่มทึบเหมาะสำหรับการดึงดูดผู้ใช้ใหม่

<div class="hidden md:flex items-center gap-3">
  <a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Sign in
  </a>
  <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
    Get Started
  </a>
</div>

ปุ่มเมนูแฮมเบอร์เกอร์

บนอุปกรณ์เคลื่อนที่ ปุ่มแฮมเบอร์เกอร์จะแทนที่ลิงก์บนเดสก์ท็อป แสดงปุ่มนี้เฉพาะบนหน้าจอขนาดเล็กด้วย md:hidden และกำหนดแอตทริบิวต์ aria-label="Open menu" ที่เข้าถึงได้

ปุ่มจะแสดงเส้นแนวนอนสามเส้น (ไอคอนแฮมเบอร์เกอร์แบบคลาสสิก) โดยใช้ SVG เมื่อคลิก JavaScript จะสลับคลาสเพื่อแสดงแผงเมนูบนอุปกรณ์เคลื่อนที่ ตัวปุ่มใช้ p-2 text-gray-600 hover:bg-gray-100 rounded-md เพื่อให้มีพื้นที่แตะที่สะดวก

<button
  id="menu-btn"
  aria-label="Open menu"
  class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
  onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
  <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
  </svg>
</button>

แผงเมนูบนอุปกรณ์เคลื่อนที่

เมนูบนอุปกรณ์เคลื่อนที่คือแผงที่กว้างเต็มพื้นที่และปรากฏใต้แถบนำทางเมื่อกดปุ่มแฮมเบอร์เกอร์ โดยซ่อนไว้เป็นค่าเริ่มต้นด้วยคลาส hidden ซึ่ง JavaScript จะนำออกเมื่อคลิกปุ่ม

จัดลิงก์เรียงในแนวตั้งด้วย flex flex-col gap-1 px-4 pb-4 และกำหนดให้แต่ละลิงก์ใช้ block py-2 text-base font-medium เพื่อให้มีพื้นที่แตะขนาดใหญ่และเหมาะกับการใช้นิ้วโป้ง

<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
  <div class="flex flex-col gap-1 px-4 pb-4 pt-2">
    <a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
    <a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
    <a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
    <a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
    <a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
      Get Started
    </a>
  </div>
</div>

ประกอบแถบนำทางทั้งหมดเข้าด้วยกัน

ประกอบทุกส่วนเข้าด้วยกันในองค์ประกอบ <nav> เดียว โครงสร้างประกอบด้วย nav ตัวครอบที่มีเงา ภายในเป็นคอนเทนเนอร์ที่มีความกว้างสูงสุดและแบ่งเป็นสามส่วน ได้แก่ โลโก้ ลิงก์บนเดสก์ท็อป และ CTA บนเดสก์ท็อป จากนั้นวางแผงเมนูบนอุปกรณ์เคลื่อนที่ที่กว้างเต็มพื้นที่ไว้นอกคอนเทนเนอร์

ตัวครอบด้านใน max-w-7xl mx-auto ป้องกันไม่ให้เนื้อหาแถบนำทางกว้างเกินไปบนจอภาพขนาดใหญ่ ขณะเดียวกันก็ยังทำให้พื้นหลังขยายจากขอบหนึ่งไปอีกขอบหนึ่ง

<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-blue-600">Brand</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
      <a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="/login" class="text-sm text-gray-600">Sign in</a>
      <a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
    </div>
    <button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
            onclick="document.getElementById('mob').classList.toggle('hidden')">
      <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
  <div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
    <a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
    <a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
    <a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
  </div>
</nav>

ตัวบ่งชี้ลิงก์ที่ใช้งานอยู่

ตัวบ่งชี้ลิงก์ที่ใช้งานอยู่แสดงให้ผู้ใช้ทราบว่ากำลังอยู่ในหน้าใด รูปแบบที่พบบ่อยคือใช้เส้นขอบด้านล่างหรือเปลี่ยนสีข้อความ ใช้ text-blue-600 border-b-2 border-blue-600 pb-0.5 กับลิงก์ที่ใช้งานอยู่ เพื่อให้โดดเด่นกว่าลิงก์สีเทา

ในแอปที่แสดงผลจากเซิร์ฟเวอร์ ให้เพิ่มคลาสที่ใช้งานอยู่แบบมีเงื่อนไขบนเซิร์ฟเวอร์ ในเฟรมเวิร์ก JS ให้เปรียบเทียบเส้นทางปัจจุบันกับ href ของลิงก์ แล้วใช้คลาสโดยอัตโนมัติผ่านโค้ด

<div class="hidden md:flex items-center gap-6">
  <!-- Active link -->
  <a href="/features"
     class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
    Features
  </a>
  <!-- Inactive links -->
  <a href="/pricing"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Pricing
  </a>
  <a href="/blog"
     class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
    Blog
  </a>
</div>

แถบนำทางพร้อมช่องค้นหา

การเพิ่มช่องค้นหาในแถบนำทางเป็นข้อกำหนดที่พบบ่อยสำหรับเว็บไซต์ที่มีเนื้อหาจำนวนมาก วางช่องค้นหาไว้ตรงกลางแถบนำทางโดยใช้ flex-1 max-w-md mx-8 เพื่อให้ความกว้างยืดหยุ่นและยังคงได้สัดส่วน

จัดรูปแบบช่องป้อนข้อมูลด้วย w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 เพื่อสร้างแถบค้นหาที่ดูสะอาดตาพร้อมวงแหวนเมื่อโฟกัส

<div class="flex-1 max-w-md mx-8">
  <div class="relative">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
         fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
    </svg>
    <input
      type="search"
      placeholder="Search..."
      class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
             bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
  </div>
</div>

รายการการนำทางแบบดรอปดาวน์

รายการการนำทางแบบดรอปดาวน์จะแสดงเมนูย่อยเมื่อวางเมาส์เหนือหรือคลิก ใช้ยูทิลิตี group กับลิงก์หลัก และใช้ group-hover:block กับเมนูย่อยที่เริ่มต้นด้วย hidden เพื่อสร้างดรอปดาวน์เมื่อวางเมาส์เหนือด้วย CSS ล้วน

จัดตำแหน่งดรอปดาวน์ด้วย absolute top-full left-0 mt-1 เพื่อวางไว้ใต้ลิงก์หลักพอดี เพิ่ม min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 เพื่อให้มีลักษณะเป็นแผงที่เหมาะสม

<div class="relative group">
  <button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
    Products
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
    <a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
    <a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
    <a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
  </div>
</div>

รูปแบบแถบนำทางสีเข้ม

แถบนำทางสีเข้มใช้พื้นหลังสีเข้มอย่าง bg-gray-900 พร้อมข้อความสีอ่อน เปลี่ยน text-gray-600 เป็น text-gray-300 สำหรับลิงก์ ใช้ hover:text-white สำหรับสถานะเมื่อวางเมาส์เหนือ และปรับปุ่มเป็น bg-blue-500 เนื่องจากต้องโดดเด่นบนพื้นหลังสีเข้ม

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

<nav class="bg-gray-900 shadow-lg">
  <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="text-xl font-bold text-white">DevTool</a>
    <div class="hidden md:flex items-center gap-6">
      <a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
      <a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
      <a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
    </div>
    <a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
      Dashboard
    </a>
  </div>
</nav>

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจแนวคิด Tailwind CSS Mastery จากบทเรียนนี้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้เกี่ยวกับ โครงสร้างแถบนำทางที่ตอบสนองต่อขนาดหน้าจอ ซึ่งใช้เค้าโครง flex สามส่วน (โลโก้ ลิงก์ CTA) ปุ่มแฮมเบอร์เกอร์และแผงเมนูบนอุปกรณ์เคลื่อนที่ที่สลับการแสดงผลด้วย JavaScript และซ่อนบนเดสก์ท็อปด้วย md:hidden รวมถึง การควบคุมการมองเห็นลิงก์บนเดสก์ท็อปด้วย hidden md:flex เพื่อให้ลิงก์ยุบรวมบนอุปกรณ์เคลื่อนที่และขยายบนหน้าจอขนาดใหญ่ขึ้น บทถัดไปเราจะทำให้การนำทางติดอยู่กับที่และกำหนดตำแหน่งแบบคงที่

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การสร้างแถบนำทางแบบตอบสนอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างแถบนำทางแบบตอบสนอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Tailwind CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Tailwind CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างแถบนำทางแบบตอบสนอง”

สร้างแถบนำทางแนวนอนที่มีโลโก้ ลิงก์ และ CTA ซึ่งยุบเป็นเมนูแฮมเบอร์เกอร์บนอุปกรณ์เคลื่อนที่ด้วยยูทิลิตี hidden และ flex แบบตอบสนอง คุณปฏิบัติ Tailwind CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Tailwind CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Tailwind CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างแถบนำทางแบบตอบสนอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Tailwind CSS Academy นี้ได้ไหม

ได้ บทเรียน Tailwind CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Tailwind CSS Academy