ดีครับดอทคอม
Bootstrap

Bootstrap 5 การสร้าง Dropdown Menu

03/09/2022
ดีครับดอทคอม
Bootstrap 5 การสร้าง Dropdown Menu

Bootstrap 5 การสร้าง Dropdown Menu

Dropdown Menu คือเมนูที่อนุญาตให้ผู้ใช้สามารถคลิกเลือกรายการ 1 เมนู จากรายการเมนูทั้งหมดที่บราจุอยู่ด้านใน 

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">เมนู 1</a></li>
      <li><a class="dropdown-item" href="#">เมนู 2</a></li>
      <li><a class="dropdown-item" href="#">เมนู 3</a></li>
    </ul>
  </div>
  • บรรทัดที่ 1 สร้าง Container ด้วยเอลิเมนต์ <div> พร้อมระบุคลาส .dropdown
  • บรรทัดที่ 2 สร้างปุ่ม (หรือลิงก์ก็ได้) พร้อมระบุคลาส .dropdown-toggle และกำหนดแอททริบิวต์ data-bs-toggle="dropdown" สำหรับเปิดรายการเมนู
  • บรรทัดที่ 5 สร้างรายการด้วยเอลิเมนต์ <ul> พร้อมระบุคลาส .dropdown-menu สำหรับบรรจุรายการเมนู
  • บรรทัดที่ 6-8 สร้างรายการเมนูด้วยเอลิเมนต์ <li> ซึ่งบรรลุเอลิเมนต์ <a> สำหรับสร้างลิงก์ไว้ดวย และภายในเอลิเมนต์ <a> ระบุคลาส .dropdown-item เพื่อบอกว่านี่คือรายการเมนู

ถ้าต้องการสร้างตัวคั่นระหว่างรายการเมนู สามารถทำได้โดยใช้คลาส .dropdown-divider ร่วมกับแท็ก <hr>

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">เมนู 1</a></li>
      <li><a class="dropdown-item" href="#">เมนู 2</a></li>
      <li><a class="dropdown-item" href="#">เมนู 3</a></li>
      <li><hr class="dropdown-divider" /></li>
      <li><a class="dropdown-item" href="#">เมนู 5</a></li>
      <li><a class="dropdown-item" href="#">เมนู 6</a></li>
    </ul>
  </div>

การสร้างหัวเมนู

ถ้าต้องการสร้างหัวเมนูเป็นรายการที่คลิกไม่ได้ เช่น เพื่อจะบอกว่าเมนูต่อไปนี้อยู่หมวดไหน เป็นต้น สามารถทำได้โดยใช้คลาส .dropdown-header ร่วมกับแท็กประเภท Heading

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

ในตัวอย่าง มี Dropdown Header 2 จุด คือ “รายการอาหาร” และ “รายการเครื่องดื่ม”

กำหนดสถานะ Active หรือ Disabled

ถ้าต้องการไฮไลต์ให้รู้ว่าขณะนี้เมนูไหนกำลัง Active อยู่ สามารถทำได้โดยใช้งานคลาส .active ในเอลิเมนต์ <a>

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

เมนูที่มีสถานะ Active จะมีสีพื้นหลังเป็นสีน้ำเงิน ในตัวอย่าง เมนู “กระเพาะปลาเนื้อปู” อยู่ในสถานะ Active

ถ้าต้องการปิดใช้งานเมนูใด ให้กำหนดคลาส .disabled ภายในแท็ก <a> 

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

เมนูที่ถูกปิด ตัวอักษรจะเป็นสีเทาจางและไม่สามารถคลิกได้ ในตัวอย่าง เมนู “เป๊ปซี่” ถูกปิดอยู่

กำหนดตำแหน่งของ Dropdown

โดยปกติ เมื่อคลิกที่ Dropdown Menu รายการเมนูจะปรากฏที่ด้านล่างของ Dropdown แต่เราสามารถกำหนดให้รายการเมนูปรากฏทางด้านหน้าหรือด้านหลังของ Dropdown ได้ โดยการใช้งานคลาส .dropend เพื่อให้รายการเมนูปรากฏทางด้านหลัว หรือใช้คลาส .dropstart เพื่อให้รายการเมนูปรากฏทางด้านหน้า โดยคลาสดังกล่าว ให้วางไว้ที่เอลิเมนต์เดียวกันกับคลาส .dropdown

  <div class="dropdown dropend">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>
  <div class="dropdown dropstart text-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

กำหนดให้รายการเมนูแสดงชิดด้านขวา

โดยปกติ รายการเมนูจะแสดงผลทางด้านล่างของ Dropdown และชิดด้านซ้ายเสมอ แต่ถ้าเราต้องการให้รายการเมนูแสดงผลชิดขวา ก็สามารถทำได้เช่นกัน โดยใช้งานคลาส .dropdown-menu-end

  <div class="dropdown dropdown-menu-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      ดร็อปดาวน์เมนูที่กำหนดให้รายการเมนูแสดงผลชิดด้านขวา
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

แสดงรายการเมนูด้านบน

โดยค่าเริ่มต้น เมื่อคลิกที่ Dropdown รายการเมนูจะแสดงเรียงลงมาด้านล่าง แต่ถ้าเราต้องการความแปลกใหม่ จะให้รายการเมนูแสดงเรียงขึ้นด้านบนบ้างก็ได้ เพียงแค่เปลี่ยนจากคลาส .dropdown เป็นคลาส .dropup แค่นั้นเอง

<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
<p>ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ </p>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      คลิกเลือกเมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
    </ul>
  </div>

Dropdown Text

ถ้าต้องการแสดงเพียงข้อความธรรมดาในเมนูโดยไม่ต้องมีการลิงก์ไปที่อื่น ก็สามารถทำได้โดยการใช้คลาส .dropdown-item-text ร่วมกับเอลิเมนต์ <span>

นอกจากนี้ คลาส .dropdown-item-text ยังใช้ร่วมกับเอลิเมนต์ <a> เพื่อให้ลิงก์แสดงผลตามสไตล์ของลิงก์ทั่ว ๆ ไปก็ได้ด้วยเช่นกัน

  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      คลิกเลือกเมนู
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">รายการอาหาร</h5></li>
      <li><a class="dropdown-item" href="#">หูฉลามน้ำแดง</a></li>
      <li><a class="dropdown-item active" href="#">กระเพาะปลาเนื้อปู</a></li>
      <li><a class="dropdown-item" href="#">ต้มยำกุ้ง</a></li>
      <li><hr class="dropdown-divider"/></li>
      <li><h5 class="dropdown-header">รายการเครื่องดื่ม</h5></li>
      <li><a class="dropdown-item disabled" href="#">เป๊ปซี่</a></li>
      <li><a class="dropdown-item" href="#">น้ำเปล่า</a></li>
      <li><a class="dropdown-item-text" href="#">เมนูแบบลิงก์ทั่วไป</a></li>
      <li><span class="dropdown-item-text">ข้อความธรรมดา</span></li>
    </ul>
  </div>

สร้างปุ่มกับ Dropdown ไว้ด้วยกัน

เราสามารถสร้างปุ่มกดกับ Dropdown Menu ไว้ด้วยกัน โดยให้แสดงผลเป็นกลุ่มเดียวกันก็ได้ ดังตัวอย่าง

  <div class="btn-group">
    <button type="button" class="btn btn-primary">Computer PC</button>
    <button type="button" class="btn btn-primary">Notebook</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Smart Phone</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">iPhone</a></li>
        <li><a class="dropdown-item" href="#">Oppo</a></li>
      </ul>
    </div>
  </div>

หรือจะให้แสดงผลเป็นแนวตั้ง ก็ทำได้ เพียงแค่เปลี่ยนคลาส .btn-group เป็นคลาส .btn-group-vertical เท่านั้น

  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Computer PC</button>
    <button type="button" class="btn btn-primary">Notebook</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Smart Phone</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">iPhone</a></li>
        <li><a class="dropdown-item" href="#">Oppo</a></li>
      </ul>
    </div>
  </div>
MOCCONA มอคโคน่า กาแฟปรุงสำเร็จชนิดผง 3อิน1 ทรีโอโกลด์ 15.8 กรัม x 20 ซอง

กาแฟปรุงสำเร็จชนิดผง 3อิน1 ทรีโอโกลด์

MOCCONA มอคโคน่า กาแฟปรุงสำเร็จชนิดผง 3อิน1 ทรีโอโกลด์ 15.8 กรัม x 20 ซอง

ช้อปเลย
Mah 2372 กระเป๋าเป้สะพายหลัง ผ้ากันน้ํา 15.6 นิ้ว

Mah 2372 กระเป๋าเป้สะพายหลัง ผ้ากันน้ํา 15.6 นิ้ว

Mah 2372 กระเป๋าเป้สะพายหลัง ผ้ากันน้ํา 15.6 นิ้ว

ช้อปเลย
Mille ไพร์มเมอร์คอลลาเจน Snail Bright Primer 15 g.

Mille ไพร์มเมอร์คอลลาเจน Snail Bright Primer 15 g.

Mille ไพร์มเมอร์คอลลาเจน Snail Bright Primer 15 g.

ช้อปเลย
KATHY AMREZ MINI MATTE LIP ลิปมินิแมท ไม่ติดแมสก์ ลิปกระแต

KATHY AMREZ ลิปมินิแมท ไม่ติดแมสก์ ลิปกระแต

KATHY AMREZ MINI MATTE LIP ลิปมินิแมท ไม่ติดแมสก์ ลิปกระแต

ช้อปเลย
แป้งพัฟบาบาร่า Babalah สูตร 1 ดั้งเดิม - 14 กรัม แป้ง ปกปิด คุมมัน กันแดด spf20 ติดทน กันน้ำ กันเหงื่อ

แป้งพัฟบาบาร่า สูตร 1 ดั้งเดิม คุมมัน กันแดด

แป้งพัฟบาบาร่า Babalah สูตร 1 ดั้งเดิม - 14 กรัม แป้ง ปกปิด คุมมัน กันแดด spf20 ติดทน กันน้ำ กันเหงื่อ

ช้อปเลย
𝐍𝐀𝐍𝐢𝐒 เสื้อกั๊กไหมพรม คอวีซิปหน้า ลายดอกไม้ ✿

𝐍𝐀𝐍𝐢𝐒 เสื้อกั๊กไหมพรม คอวีซิปหน้า ลายดอกไม้ ✿

𝐍𝐀𝐍𝐢𝐒 เสื้อกั๊กไหมพรม คอวีซิปหน้า ลายดอกไม้ ✿

ช้อปเลย
  • Bootstrap 5 Tooltip
  • Bootstrap 5 Popover
  • Bootstrap 5 Toasts
  • Bootstrap 5 Scrollspy
  • Bootstrap 5 Offcanvas
  • Bootstrap 5 Utilities
  • Bootstrap 5 Flex
  • Bootstrap 5 Forms
  • Bootstrap 5 Select
  • Bootstrap 5 Checkboxes and Radio buttons
  • Bootstrap 5 Range
  • Bootstrap 5 Input Groups
  • Bootstrap 5 Form Floating Labels
  • Bootstrap 5 Form Validation
  • Bootstrap 5 Grid System
  • Bootstrap 5 Grid Stacked to horizontal
  • Bootstrap 5 Grid Extra Small
  • Bootstrap 5 Grid Small
  • Bootstrap 5 Grid Medium
  • Bootstrap 5 Grid Large
  • Bootstrap 5 Grid Extra Large
  • Bootstrap 5 Grid XXL
  • Bootstrap 5 Grid Examples