Bài 6: Dropdowns – Tạo menu thu gọn trong Bootstrap

0

Trong bài này, mình sẽ hướng dẫn các bạn về dropdowns – tạo menu thu gọn trong trong Bootstrap. Dropdowns được ứng dụng khá nhiều trong việc tạo ra những nút menu thu gọn.

Video – Dropdowns – Tạo menu thu gọn trong Bootstrap

Yêu cầu cần thực hiện

Ví dụ cho Dropdowns – Tạo menu thu gọn trong Bootstrap

Menu sẽ thu gọn, và chỉ hiện ra khi nhấn vào button.

Cấu trúc và cách thức hoạt động của dropdowns

Do ropdowns được xây dựng dựa trên thư viện js của bên thứ ba (cụ thể là Popper JS) nên bạn cần thêm file popper.min.js vào trước bootstrap.min.js. Các bạn có thể tải file popper.min.js trong phần tài liệu của bootstrap, hoặc code demo của m2inh ở cuối bài viết cũng có chứa file này.

<script src="jquery-3.3.1.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Phần button hoặc thẻ a điều khiển

Button và thẻ a điều khiển cần có thuộc tính data-toggle=”dropdown”

<button class="btn btn-secondary" data-toggle="dropdown">Menu Dropdown</button>

Phần nội dung

+ Các dòng trong menu là các thẻ a hoặc các bạn có thể dùng cấu trúc thẻ ul và li cũng được. Mỗi dòng có class=”dropdown-item”.

+ Tuy nhiên, các dòng chỉ mới xếp thành danh sách và chưa ẩn vào button. Để ẩn đi các item này, các bạn bao bên ngoài các thẻ a bằng 1 khối div có class=”dropdown-menu”.

+ Để giữa các dòng có đường kẻ phân chia, các bạn thêm thẻ div có class=”dropdown-divider”

<div class="dropdown-menu">
<a href="" class="dropdown-item">Item 1</a>
<div class="dropdown-divider"></div>
<a href="" class="dropdown-item">Item 2</a>
<div class="dropdown-divider"></div>
<a href="" class="dropdown-item">Item 3</a>
</div>

Để cho chuẩn hơn, 2 phần button và nội dung nên được nằm trong 1 khối có class=”dropdown”

Như vậy là chúng ta đã có 1 menu thu gọn. Mặc định, danh sách các dòng này sẽ đổ xuống phía dưới. Các bạn có thể tùy chỉnh phần này nhé. Tài liu tham kho ca Bootstrap cũng giới thiệu rất nhiều những tùy chỉnh riêng khác.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.