Bài 32: Dropdowns trong CSS

Dropdown cơ bản

Tạo hộp dropdown suất hiện khi người dùng di chuyển chuột qua một phần tử.

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Di chuột qua đây</span>
  <div class="dropdown-content">
    <p>Tìm ở đây!</p>
  </div>
</div>

Giải thích ví dụ

HTML) Sử dụng bất kỳ phần tử nào để mở nội dung thả xuống, ví dụ: một phần tử <span> hoặc <button>.

Sử dụng một phần tử vùng chứa (như <div>) để tạo nội dung thả xuống và thêm bất cứ thứ gì bạn muốn vào bên trong nó.

Quấn phần tử <div> xung quanh các phần tử để định vị nội dung thả xuống một cách chính xác với CSS.

CSS) Lớp .dropdown sử dụng position:relative, cần thiết khi chúng ta muốn nội dung thả xuống được đặt ngay bên dưới nút thả xuống (sử dụng position:absolute).

Lớp .dropdown-content chứa nội dung thả xuống thực tế. Nó bị ẩn theo mặc định và sẽ được hiển thị khi di chuột (xem bên dưới). Lưu ý rằng min-width được đặt thành 160px. Hãy thay đổi điều này. Mẹo: Nếu bạn muốn chiều rộng của nội dung thả xuống rộng bằng nút thả xuống, hãy đặt width thành 100% (và overflow:auto để cho phép cuộn trên màn hình nhỏ).

Thay vì sử dụng đường viền, chúng tôi đã sử dụng thuộc tính CSS box-shadow để làm cho menu thả xuống trông giống như một “thẻ”.

Bộ chọn :hover được sử dụng để hiển thị menu thả xuống khi người dùng di chuyển chuột qua nút dropdown .

Dropdown Menu

Tạo dropdown menu cho phép người dùng chọn một tùy chọn từ danh sách.
Ví dụ này tương tự như ví dụ trước, ngoại trừ việc chúng tôi thêm các liên kết bên trong hộp thả xuống và tạo kiểu cho chúng theo kiểu dropdown button:

<style>
/* Kiểu của Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Vùng chứa <div> - cần thiết để định vị nội dung thả xuống */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (ẩn bởi mặc định) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Liên kết nằm trong dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Thay đổi màu của liên kết thả xuống khi di chuột */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Hiển thị dropdown menu khi di chột */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Thay đổi màu nền của nút dropdown khi nội dung thả xuống được hiển thị*/
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Căn chỉnh nội dung thả xuống

Nếu bạn muốn menu thả xuống chuyển từ phải sang trái, thay từ vị trí trái sang phải, thêm right: 0;

.dropdown-content {
  right: 0;
}

Các ví dụ khác

Dropdown Image

Cách thêm hình ảnh và nội dung khác bên trong hộp thả xuống:

Dropdown Navbar

Cách thêm menu thả xuống bên trong thanh điều hướng: