วิธีการสร้าง Menu bar HTML ของเว็บไซต์ ด้วย Bootstrap

สอนวิธีการสร้าง Menu bar HTML ของเว็บไซต์ ด้วย Bootstrap Framework โดยใช้ class navbar โดยตัว Menu bar นี้จะรองรับเมนูแบบ dropdown ด้วย class dropdown-menu สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วิธีติดตั้ง Bootstrap Framework

ตัวอย่าง วิธีการสร้าง Menu bar HTML ของเว็บไซต์ ด้วย Bootstrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo Website</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMarkup">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" href="#">หน้าแรก</a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" 
          data-bs-toggle="dropdown">สินค้า</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">ประเภทที่ 1</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">ประเภทที่ 2</a></li>
          </ul>
        </li>
        <a class="nav-link" href="#">ติดต่อเรา</a>
      </div>
    </div>
  </div>
</nav>

1. การสร้าง Menu bar HTML ของเว็บไซต์ ด้วย Bootstrap Framework เริ่มต้นด้วยการติดตั้ง CSS และ JS ของ Bootstrap Framework

2. เปลี่ยนชื่อเว็บไซต์ตรง class navbar-brand ตัวอย่างคือ Logo Website

3. ตรง navbar-toggler จะใช้สำหรับเวลาแสดงผลบนอุปกรณ์พกพา จะเป็นส่วนของ Icon ให้ผู้ใช้งานแตะเพื่อแสดงเมนู

4. เปลี่ยนชื่อเมนู และ URL ตรง class nav-link ในแต่ละเมนูของ Menu bar

5. class nav-link dropdown-toggle เป็นเมนูแบบ dropdown ให้เปลี่ยนชื่อเมนู และ URL ที่ class dropdown-item ได้ในแต่ละเมนู

6. เปลี่ยนชื่อเมนูหลักของ dropdown ที่ class nav-link dropdown-toggle ตัวอย่างคือ สินค้า

7. li clsss dropdown-divider ใช้สำหรับคั่นแต่ละเมนูของเมนู dropdown