สอนใช้งาน Bootstrap 4

Bootstrap 4 การใช้งาน Navigation Bar

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

การสร้าง Navigation Bar พื้นฐาน

เริ่มจากการสร้าง Navigation Bar ที่เรียบง่ายโดยใช้คลาส navbar ของ Bootstrap 4

HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">แบรนด์</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">หน้าหลัก <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ฟีเจอร์</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">เกี่ยวกับเรา</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ติดต่อ</a>
      </li>
    </ul>
  </div>
</nav>

ในตัวอย่างนี้ เราสร้าง Navigation Bar ที่มีแบรนด์ ชื่อฟีเจอร์ และลิงก์ต่างๆ ซึ่งมีการจัดเรียงที่สวยงามโดยใช้คลาส navbar-light และ bg-light

Navigation Bar ที่มีสีพื้นหลัง

สามารถเปลี่ยนสีพื้นหลังของ Navigation Bar โดยใช้คลาสที่มีอยู่ใน Bootstrap เช่น navbar-dark และ bg-dark

HTML
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">แบรนด์</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">หน้าหลัก</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ฟีเจอร์</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">เกี่ยวกับเรา</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ติดต่อ</a>
      </li>
    </ul>
  </div>
</nav>

การใช้ Dropdown ใน Navigation Bar

Bootstrap 4 ยังรองรับการสร้าง Dropdown เมนูใน Navigation Bar ได้อย่างง่ายดาย

HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">แบรนด์</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">หน้าหลัก</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ฟีเจอร์
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">ฟีเจอร์ 1</a>
          <a class="dropdown-item" href="#">ฟีเจอร์ 2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">ฟีเจอร์ 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">เกี่ยวกับเรา</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ติดต่อ</a>
      </li>
    </ul>
  </div>
</nav>

Navigation Bar แบบ Fixed Top

เราสามารถทำให้ Navigation Bar ยึดติดอยู่ที่ด้านบนของหน้าได้โดยใช้คลาส fixed-top

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">หน้าแรก <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">บริการ</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ติดต่อเรา</a>
            </li>
        </ul>
    </div>
</nav>

สรุป

Navigation Bar (Navbar) ใน Bootstrap 4 เป็นเครื่องมือที่มีประโยชน์และยืดหยุ่นในการนำทางภายในเว็บไซต์ เราสามารถปรับแต่งตามความต้องการ ไม่ว่าจะเป็นแบบพื้นฐาน, แบบมี Dropdown, หรือแม้กระทั่งแบบ Fixed Top และ Dark ให้เหมาะสมกับการออกแบบเว็บไซต์ของเรา

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ