Tạo Menu Thả Xuống (Dropdown) với CSS

Ngày nay, menu thả xuống (dropdown) là một tính năng phổ biến trên hầu hết các website hiện đại. Chúng cho phép tạo điều hướng tùy chỉnh hơn, giúp người dùng dễ dàng tìm thấy nội dung họ cần.

CSS kết hợp với HTML có thể tạo ra menu thả xuống hiển thị nội dung chỉ khi người dùng di chuột qua nhãn menu.

Hướng dẫn này sẽ thảo luận cách tạo menu thả xuống trong CSS kèm ví dụ. Sau khi đọc xong, bạn sẽ có đủ công cụ và code để tự tạo menu thả xuống riêng.

Cơ chế Menu Thả Xuống trong CSS

Trong HTML, không có thẻ chuyên biệt để tạo menu thả xuống. Tuy nhiên, nhờ CSS, chúng ta có thể tạo menu hiển thị văn bản hoặc danh sách liên kết khi người dùng di chuột qua.

Ví dụ thực tế: một câu lạc bộ cầu lông địa phương muốn tạo website chia sẻ thông tin. Họ yêu cầu một menu thả xuống được kích hoạt khi di chuột qua, hiển thị 3 trang: Equipment (Thiết bị), Getting Started (Bắt đầu) và Membership Information (Thông tin thành viên). Nhãn menu là "New Members" (Thành viên mới).

Ví dụ Menu Thả Xuống

Đầu tiên, tạo cấu trúc HTML cơ bản cho menu:

<div class="menu">
  <button class="dropdown_button">New Members</button>
  <div class="content">
    <a href="equipment.html">Equipment</a>
    <a href="gettingstarted.html">Getting Started</a>
    <a href="membership.html">Membership Information</a>
  </div>
</div>

Giải thích cấu trúc:

Thẻ <div> với class menu chứa toàn bộ code menu.
Nút bấm (button) hiển thị văn bản "New Members".
Một <div> khác chứa danh sách liên kết.
Ba thẻ <a> tạo liên kết đến các trang tương ứng.

Chưa có CSS, menu hiển thị thuần HTML. Dưới đây là CSS để định dạng menu cho website câu lạc bộ cầu lông:

.dropdown_button {
  background-color: #90EE90;
  color: white;
  padding: 10px;
  font-size: 15px;
  border: none;
}
.menu {
  display: inline-block;
  position: relative;
}
.content {
  display: none;
  background-color: lightgray;
  min-width: 150px;
  z-index: 1;
  position: absolute;
}
.content a {
  text-decoration: none;
  display: block;
  color: black;
  padding: 16px;
}
.content a:hover {
  background-color: #f7f7f7;
}
.menu:hover .content {
  display: block;
}

Phân tích code CSS:

.dropdown_button: Định dạng nút bấm: nền xanh nhạt, chữ trắng, padding 10px, font-size 15px, bỏ viền.
.menu: Container chính, hiển thị inline-block, vị trí relative để các phần tử con định vị tuyệt đối dựa trên nó.
.content: Khu vực nội dung menu, mặc định ẩn (display: none), nền xám nhạt, chiều rộng tối thiểu 150px, z-index: 1 để hiển thị trên các phần tử khác, vị trí absolute.
.content a: Định dạng các liên kết trong menu: bỏ gạch chân, hiển thị block, chữ đen, padding 16px.
.content a:hover: Khi di chuột qua liên kết, nền chuyển sang xám rất nhạt (#f7f7f7).
.menu:hover .content: Khi di chuột qua container .menu, nội dung .content hiển thị block (xuất hiện).

Nếu bạn quan tâm đến cách hoạt động của bộ chọn :hover trong CSS, hãy tham khảo hướng dẫn về CSS :hover selector.

Menu Thả Xuống Bên Phải (Right Dropdown)

Ví dụ trên tạo menu xuất hiện bên trái. Nếu muốn menu xuất hiện bên phải màn hình, thêm quy tắc CSS sau:

.content {
  right: 0;
}

Quy tắc này sẽ đẩy menu và nội dung sang bên phải.

Kết luận

HTML tạo cấu trúc cơ bản cho menu thả xuống, CSS thêm kiểu dáng để tạo menu hoàn chỉnh và thẩm mỹ. Hướng dẫn này đã trình bày cách tạo menu thả xuống dùng HTML và CSS. Với code đã thảo luận, bạn có thể tự tạo menu thả xuống riêng cho dự án của mình.