Dropdown menu là một thành phần giao diện người dùng phổ biến, giúp người dùng dễ dàng truy cập các tùy chọn khác nhau. Bootstrap cung cấp các công cụ mạnh mẽ để tạo dropdown menu một cách nhanh chóng và dễ dàng. Bài viết này sẽ hướng dẫn chi tiết cách tạo dropdown menu với Bootstrap, giúp bạn xây dựng giao diện web trực quan và thân thiện.
Để bắt đầu, bạn cần bao bọc tất cả các thành phần của dropdown menu bên trong một thẻ div với class dropdown. Class này sẽ áp dụng các kiểu dáng (style) mặc định của Bootstrap cho dropdown menu.
Dropdown
Hãy cùng phân tích cấu trúc của đoạn code trên:
Phần tử quan trọng đầu tiên là thẻ a (hoặc thẻ button). Trong ví dụ trên, thẻ a được sử dụng để hiển thị văn bản “Dropdown” và liên kết đến một địa chỉ URL nào đó. Tuy nhiên, bạn hoàn toàn có thể sử dụng thẻ button nếu không cần liên kết.
Trong thẻ a, có hai thuộc tính quan trọng cần lưu ý:
data-toggle="dropdown": Đây là thuộc tính đặc biệt của Bootstrap, cho phép kích hoạt chức năng dropdown khi người dùng nhấp vào phần tử này.<span class="caret"></span>: Classcarettạo ra một biểu tượng mũi tên nhỏ hướng xuống, cho biết đây là một dropdown menu.
Phần thứ hai là danh sách các tùy chọn menu, được bao bọc bên trong thẻ ul với class dropdown-menu. Theo mặc định, phần này sẽ ẩn đi và chỉ hiển thị khi người dùng nhấp vào (hoặc di chuột qua, tùy thuộc vào cài đặt) thẻ a ở trên.
Bài 3 – Tạo Dropdown Menu với Bootstrap
Mục Lục
Vô hiệu hóa (Disable) một phần tử trong Dropdown Menu
Đôi khi, bạn muốn vô hiệu hóa một số tùy chọn trong dropdown menu để ngăn người dùng chọn chúng. Để làm điều này, chỉ cần thêm class disabled vào thẻ li tương ứng. Phần tử menu đó sẽ bị mờ đi và không thể tương tác được.
Bài 3 – Tạo Dropdown Menu với Bootstrap
Bây giờ, chúng ta đã biết cách tạo một dropdown menu đơn giản. Vậy làm thế nào để tích hợp nó vào thanh điều hướng (navigation bar) của Bootstrap? Hãy xem ví dụ sau:
Đoạn code trên sẽ tạo ra một thanh điều hướng với một mục menu “Dropdown” có chức năng dropdown. Để ý rằng, trong ví dụ này, class dropdown được thêm vào thẻ li thay vì thẻ div như ví dụ đầu tiên. Điều này là do dropdown menu này là một phần của hệ thống menu điều hướng.
Kết quả hiển thị trên trình duyệt sẽ tương tự như sau:
Bài 3 – Tạo Dropdown Menu với Bootstrap
Như vậy, việc thêm một dropdown menu vào thanh điều hướng của Bootstrap rất đơn giản. Hãy thử áp dụng và tùy chỉnh để tạo ra các menu điều hướng phù hợp với nhu cầu của bạn.
Lời khuyên:
- Sử dụng các class hỗ trợ của Bootstrap để tùy chỉnh giao diện dropdown menu, ví dụ như
dropdown-menu-rightđể căn phải menu,dropdown-dividerđể tạo đường kẻ phân cách giữa các mục. - Đảm bảo rằng các tùy chọn trong dropdown menu có liên quan đến nhau và cung cấp giá trị cho người dùng.
- Kiểm tra kỹ trên các thiết bị khác nhau để đảm bảo dropdown menu hiển thị đúng cách và hoạt động tốt.
Chúc các bạn thành công!