Dropdown Menu
Dropdown Menu là một thành phần giao diện quen thuộc, cho phép người dùng chọn từ nhiều tùy chọn trong một danh sách ẩn được hiển thị khi tương tác.
Dropdown Menu là gì?
Dropdown Menu hay menu thả xuống là một dạng điều hướng hoặc lựa chọn trong giao diện web/app. Nó thường hiển thị một nút hoặc nhãn chính, khi người dùng nhấp chuột hoặc di chuột vào sẽ mở ra một danh sách các tùy chọn liên quan.
Ví dụ: chọn ngôn ngữ, chọn quốc gia, hiển thị các mục con trong thanh điều hướng.
Dropdown Menu
Đặc điểm của Dropdown Menu
- Tiết kiệm không gian: Giúp hiển thị nhiều lựa chọn mà không chiếm quá nhiều diện tích trên giao diện.
- Dễ sử dụng: Người dùng chỉ cần một cú nhấp chuột hoặc chạm để xem và chọn tùy chọn.
- Đa dạng hiển thị: Có thể dạng danh sách đơn giản, dạng nhiều cấp (multi-level) hoặc dạng mega menu.
- Tính tương tác: Dropdown thường kết hợp với hiệu ứng (fade, slide) để mang lại trải nghiệm mượt mà.
Các loại Dropdown Menu phổ biến
- Single-level Dropdown: Danh sách thả xuống đơn giản, chỉ một cấp lựa chọn.
- Multi-level Dropdown: Có nhiều cấp con, thường dùng trong điều hướng website phức tạp.
- Select Dropdown (Form): Dùng trong biểu mẫu để chọn một giá trị từ nhiều lựa chọn.
- Mega Dropdown Menu: Hiển thị khối lớn chứa nhiều danh mục, hình ảnh, hoặc nội dung, thường thấy trong các website thương mại điện tử.
Ứng dụng của Dropdown Menu
- Điều hướng website: Hiển thị các mục con của menu chính.
- Biểu mẫu nhập liệu: Chọn giới tính, quốc gia, ngôn ngữ…
- Cài đặt người dùng: Quản lý hồ sơ, đổi mật khẩu, đăng xuất.
- Thương mại điện tử: Hiển thị danh mục sản phẩm, bộ lọc tìm kiếm.
Ví dụ HTML cơ bản của Dropdown Menu
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="#">Trang chủ</a>
<a href="#">Giới thiệu</a>
<a href="#">Liên hệ</a>
</div>
</div>
Dropdown Menu là một thành phần quan trọng giúp tổ chức và tối ưu trải nghiệm điều hướng, nhưng cần được thiết kế đơn giản, dễ dùng và thân thiện với mọi thiết bị.
