Tự học Bootstrap - Cơ bản - bài 18 - Menu dropdown

Menu Dropdown cơ bản

01 menu dropdown là 01 menu có thể dãn ra/thu lại cho phép người dùng chọn 01 giá trị từ danh sách xác định trước.

Ví dụ:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ Dropdown:
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Giải thích

Lớp .dropdown xác định 01 menu dropdown.

Để tạo 01 menu có thể sổ xuống, dùng 01 nút hoặc 01 liên kết với 01 lớp .dropdown-toggle và thuộc tính data-toggle="dropdown"

Lớp .caret tạo 01 biểu tượng mũi tên (), để chỉ ra rằng nút bấm này là 01 dropdown.

Thêm lớp .dropdown-menu vào thẻ <ul> để xây dựng 01 menu dropdown thực sự.

---

Dropdown Divider

Lớp .divider được dùng để chia cắt các liên kết bên trong menu dropdown bằng 01 đường ngang mỏng.

Ví dụ: chú ý thêm luôn cả thẻ <li>

<li class="divider"></li>

---

Tiêu đề Dropdown

Lớp .dropdown-header được dùng để thêm tiêu đề bên trong menu dropdown.

<li class="dropdown-header">Dropdown header 1</li>

---

Vô hiệu hóa và kích hoạt các mục menu

Tô sáng 01 mục menu bằng lớp .active (màu nền xanh dương).

Vô hiệu hóa 01 mục trong menu dropdown, ta dùng lớp .disabled (mục đó sẽ có chữ màu xám nhạt và 01 biểu tượng "no-parking-sign" khi rê chuột vào.

Ví dụ:

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

---

Dropdown Position

Để canh lề phải menu dropdown, thêm lớp .dropdown-menu-right  vào thẻ ul sau thuộc tính .dropdown-menu.

<ul class="dropdown-menu dropdown-menu-right">

Menu Dropup

Nếu bạn muốn 01 menu sổ lên thay vì sổ xuống, đổi lớp trong thẻ <div> thành "dropup"

<div class="dropup">

---

Dropdown Accessibility

Để người sử dụng man hình chạm dễ truy cập , bạn nên thêm các thuộc tính role và aria-*, khi tạo 01 menu dropdown.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48