ไม่ว่าคุณจะทำพอร์ตโฟลิโอหน้าเดียว, แอปมอนolitik สำหรับบริษัทใหญ่, บล็อก, หรือฟอรัม โอกาสสูงที่คุณจะต้องการ dropdown menu
Dropdown menu มีประโยชน์มากเมื่อมีลิงก์หรือการกระทำเยอะ แต่พื้นที่หน้าเว็บไม่พอแสดงทั้งหมด
ปกติ dropdown ต้องใช้ JavaScript นิดหน่อย
หากยังไม่เริ่มเรียน JS หรือต้องการโซลูชันเร็ว Bootstrap เหมาะที่สุด
Bootstrap คืออะไร?
คุณน่าจะเคยได้ยินคำนี้ บทความนี้อธิบาย: Bootstrap คือ front-end CSS framework (พร้อม JavaScript นิดหน่อย) เป็นโครงสร้างสำเร็จรูปที่พัฒนามาเพื่อเร่งการพัฒนา โปรแกรมเมอร์ใช้เวลาพัฒนามาตรฐานและรวม setup ที่จำเป็นไว้ใน framework เพื่อไม่ต้องทำซ้ำทุกครั้ง
สไตล์มาตรฐานถูกนำไปใช้กับคอมโพเนนต์ที่สร้างบ่อย เช่น ปุ่ม, กลุ่มปุ่ม, navigation bars หมายถึงเราสามารถใช้สไตล์เหล่านี้ด้วยคีย์เวิร์ดกำหนดไว้ แทนการเขียนโค้ดซ้ำหลายบรรทัด ช่วย consistency มากเมื่อทีมหลายคนทำงานบนแอปใหญ่
การตั้งค่า Bootstrap
เพื่อใช้ Bootstrap ต้องเพิ่มโค้ดสักหน่อยในโครงสร้าง HTML ใช้ Bootstrap CDN สำหรับการตั้งค่าเร็วที่สุด
ก่อนอื่น ต้องมี HTML5 template ที่ถูกต้อง ใน VSCode พิมพ์ ! แล้ว Enter/Tab จะได้โครงสร้าง:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
ในแท็ก <head> วางโค้ดด้านล่างเหนือ stylesheets อื่น:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
Bootstrap ขึ้นอยู่กับ JavaScript libraries ดังนั้นต้องรวม <script> tags ก่อน </body> ปิด:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>
ตั้งค่าเสร็จ พร้อมใช้ Bootstrap แล้ว
การใช้งาน Bootstrap
พลังของ Bootstrap ใช้งานผ่านคีย์เวิร์ดเป็น class ของแท็ก HTML สามารถจัดสไตล์หน้าเว็บทั้งหมดโดยไม่ต้องสร้าง CSS file!
ตัวอย่าง button group เรียบง่าย:
<div class="btn-group"> <button class="btn btn-primary">button 1</button> <button class="btn btn-secondary">button 2</button> <button class="btn btn-info">button 3</button> <button class="btn btn-success">button 4</button> <button class="btn btn-danger">button 5</button> <button class="btn btn-light">button 6</button> <button class="btn btn-dark">button 7</button> <button class="btn btn-white">button 8</button> <button class="btn btn-warning">button 9</button> </div>
ผลลัพธ์:
สร้าง button group ด้วยสี preset ของ Bootstrap (muted ไม่รวม เพราะสงวนไว้สำหรับข้อความ)
มาสู่ dropdown กัน
Bootstrap Dropdowns, หลายรูปแบบ
Bootstrap รุ่นเก่าใช้ <a> tags เฉพาะสำหรับ dropdown ตั้งแต่ v4 รองรับ <button> tags ด้วย
หมายเหตุเกี่ยวกับลิงก์และปุ่ม:
ลิงก์ควรใช้สำหรับนำทางเท่านั้น ไม่ว่าภายในหน้าหรือไปหน้าอื่น แต่หน้าที่ของลิงก์ควรเป็นการนำทางอย่างเดียว
การกระทำแบบอื่น เช่น login, sign up, submit form, ซ่อน section, เปลี่ยนธีมสี ควรใช้ปุ่ม JavaScript click-related actions ควรใช้ปุ่ม
ลิงก์เข้าถึงได้แค่ Enter แต่ปุ่มเข้าถึงได้ทั้ง Enter และ Space สำคัญสำหรับ accessibility
ในทุกกรณี แอตทริบิวต์ data-toggle="dropdown" จำเป็นต้องมีเพื่อทำงาน
Dropdown ด้วยปุ่ม (Buttons)
<div class="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This dropdown</a> <a href="#" class="dropdown-item">Uses</a> <a href="#" class="dropdown-item">Buttons</a> </div> </div>
ห่อทั้งหมดในเอลิเมนต์ (มักเป็น <div>) class="dropdown" สร้างปุ่ม class="btn dropdown-toggle" และ data-toggle="dropdown" เป็นองค์ประกอบแรก เป็น toggle สำหรับ dropdown menu
สร้าง container สำหรับ dropdown จริง (มัก <div> หรือ <ul>) class="dropdown-menu" สร้างรายการที่ต้องการในเมนู class="dropdown-item" มักเป็นลิงก์ไปหน้าอื่นหรือ section ในหน้านี้
ผลลัพธ์:
ยินดีด้วย! คุณสร้าง dropdown menu ด้วย Bootstrap แล้ว!
Dropdown ด้วยลิงก์ (Links)
<div class="dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown"> Link menu </a> <ul class="dropdown-menu"> <a class="dropdown-item" href="#">This dropdown</a> <a class="dropdown-item" href="#">Uses</a> <a class="dropdown-item" href="#">Links</a> </ul> </div>
ทำได้เหมือนกันด้วย <a> tags ใช้ <ul> สำหรับเมนูครั้งนี้ ผลลัพธ์เหมือนกัน
จัดสไตล์เมนูและรายการ
เพิ่มสี Bootstrap ให้เมนู โดยใช้ prefix bg- (background):
<div class="dropdown"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Styled menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item bg-primary">This is a</a> <a href="#" class="dropdown-item bg-warning">Styled</a> <a href="#" class="dropdown-item bg-success">Dropdown</a> </div> </div>
ผลลัพธ์:
Split Button Dropdown
ตัวเลือกน่าสนใจ: split button ได้ double functionality ปุ่มหนึ่งทำหน้าที่หนึ่ง และ caret เข้าถึง dropdown กรณีใช้: ปุ่มเปิดหน้าที่มีรายการทั้งหมดจากเมนู และลิงก์แต่ละตัวไปหน้าแยก:
<div class="dropdown"> <div class="btn-group"> <a href="#" class="btn btn-danger">All Menu Items</a> <a class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" ></a> <div class="dropdown-menu"> <a href="#" class="dropdown-item bg-primary">Item #1</a> <a href="#" class="dropdown-item bg-warning">Item #2</a> <a href="#" class="dropdown-item bg-success">Item #3</a> </div> </div> </div>
ต้องมี container class="btn-group" ห่อปุ่มและ toggle เพิ่ม dropdown-toggle-split ให้ toggle button
ฟอร์มภายใน Dropdown
สามารถวาง HTML form ภายใน dropdown menu ได้:
<div class="dropdown" data-toggle="dropdown"> <button class="dropdown-toggle btn-danger btn">Dropdown Form</button> <div class="dropdown-menu"> <form> <div class="form-group"> <label for="dropdown-form-name">Your name</label> <input type="text" class="form-control" id="dropdown-form-name" /> </div> <div class="form-group"> <label for="dropdown-form-password">Your password</label> <input type="password" class="form-control" id="dropdown-form-password" /> </div> <input type="button" class="btn" value="Press Me!" /> <span class="sr-only">Submit Form</span> <button type="submit" class="btn btn-success">Submit</button> </form> </div> </div>
สร้างฟอร์มปกติภายใน container dropdown-menu กรณีใช้บ่อย: login form เรียบง่าย
หมายเหตุ: Bootstrap มี class sr-only (screen-readers only) ซ่อนในหน้าแต่ screen reader อ่านได้ สำคัญสำหรับ accessibility
Dropup, Dropleft, Dropright
รูปแบบ dropdown อื่นๆ:
Dropup Menu
ใช้ dropup สำหรับ navigation bar ที่ docking ที่ด้านล่างหน้า:
<div class="dropup"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropup menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropup menu</a> </div> </div>
Dropleft Menu
ใช้ dropleft เมื่อปุ่มเปิดเมนูอยู่ขอบขวาจอ เพื่อเมนูไม่ล้มหน้าจอ:
<div class="dropleft"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropleft menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropleft menu</a> </div> </div>
Dropright Menu
Dropright เหมือน dropleft แต่ด้านตรงข้าม:
<div class="dropright"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Dropright menu </a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">Bootstrap</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropright menu</a> </div> </div>
ทุกตัวอย่างมี dropdown-divider (div ว่าง class dropdown-divider) ให้การแบ่ง section ในเมนู
Dropdown พร้อม Header
สามารถมี header text ใน dropdown โดยสร้างเอลิเมนต์ class="dropdown-header":
<div class="dropdown m-4" data-toggle="dropdown"> <button class="dropdown-toggle btn-info btn">Entitled Dropdown</button> <div class="dropdown-menu"> <h2 class="dropdown-header">I'm a title</h2> <a class="dropdown-item" href="#">We are</a> <a class="dropdown-item" href="#">Items</a> </div> </div>
ทำไมใช้ heading แทน p, span? Heading <h1-h6> มีบทบาทใน SEO ควรวางที่เหมาะสม หาก dropdown โฮสต์ section สำคัญของเว็บ อาจควรมี heading Bootstrap มี formatting ให้ heading tags มองเห็นได้ในตัวอย่าง:
Right-Aligned Dropdown
โดยค่าเริ่มต้น dropdown ของ Bootstrap จัดซ้ายกับ toggle button หากต้องการจัดขวา เพิ่ม class dropdown-menu-right:
<div class="dropdown"> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> Right-aligned </a> <div class="dropdown-menu dropdown-menu-right"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item">right-aligned</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Dropdown menu</a> </div> </div>
Active และ Disabled Items ใน Dropdown
ทำให้ dropdown item เป็น disabled หรือ active ได้โดยเพิ่ม class ที่เหมาะสม:
<div class="dropdown m-4"> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" > Disabled button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is a</a> <a href="#" class="dropdown-item disabled">Disabled</a> <a href="#" class="dropdown-item">Button</a> </div> </div>
เมื่อไหร่ต้องการ disabled item? ตัวเลือกไม่พร้อมใช้งาน เช่น ส่งของทั่วโลกไม่ได้, สินค้าหมดสต็อก ฯลฯ
<div class="dropdown m-4"> <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Active button menu </button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">This is</a> <a href="#" class="dropdown-item active">An active</a> <a href="#" class="dropdown-item">Button</a> </div> </div>
Active class ดึงดูดความสนใจ ไฮไลท์ element ปัจจุบัน/โฟกัส กรณีใช้ static (ไม่เปลี่ยนแปลง) สำหรับ call-to-action (ซื้อ, สมัคร, subscribe) หรือนำสายตาผู้ใช้ไปยัง element เฉพาะ
คุณพร้อมสำหรับ Bootstrap แล้ว
Bootstrap เป็น framework อันทรงพลังสำหรับ rapid development โดย abstraction setup ที่จำเป็นในแต่ละโปรเจกต์ สำหรับแต่ละคอมโพเนนต์
วันนี้เราเรียนรู้การทำ dropdown หลากหลายรูปแบบด้วย Bootstrap โดยไม่ต้องเขียน JS (อย่างน้อยไม่เราเอง) ไป bootstrap โปรเจกต์กันเถอะ!
