Cách tạo: Menu cuộn lên

Học cách sử dụng CSS tạo menu cuộn lên.

Tạo menu cuộn lên nổi

Tạo menu cuộn lên hiển thị khi người dùng di chuột qua phần tử.

Bước 1 - Thêm HTML:

<div class="dropup">
  <button class="dropbtn">Cuộn lên</button>
  <div class="dropup-content">
    <a href="#">Liên kết 1</a>
    <a href="#">Liên kết 2</a>
    <a href="#">Liên kết 3</a>
  </div>
</div>

Giải thích ví dụ:

Bạn có thể sử dụng bất kỳ phần tử nào để mở menu cuộn lên, ví dụ như phần tử <button>, <a> hoặc <p>.

Sử dụng phần tử chứa (như <div>) để tạo menu cuộn lên và thêm liên kết cuộn lên.

Sử dụng phần tử <div> để bao bọc nút và <div> để định vị chính xác menu cuộn lên.

Bước 2 - Thêm CSS:

/* nút mở rộng */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* Thẻ <div> - được sử dụng để định vị nội dung trình đơn kéo xuống cần thiết */
.dropup {
  position: relative;
  display: inline-block;
}
/* Nội dung trình đơn kéo xuống (mặc định ẩn) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Liên kết trong trình đơn kéo xuống */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Thay đổi màu của liên kết khi chuột chạm vào */
.dropup-content a:hover {background-color: #ddd}
/* Hiển thị trình đơn kéo xuống khi chuột chạm vào */
.dropup:hover .dropup-content {
  display: block;
}
/* Khi nội dung trình đơn kéo xuống hiển thị, thay đổi màu nền của nút kéo xuống */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Thử ngay

Giải thích ví dụ:

chúng tôi đã thiết lập các phong cách cho nút kéo xuống như màu nền, lề trong và vân vân.

.dropup lớp sử dụng position:relativekhi chúng tôi muốn đặt nội dung trình đơn kéo xuống ở trên nút kéo xuống (sử dụng position:absolute），đây là bắt buộc.

.dropup-content lớp chứa trình đơn kéo xuống thực tế. Nó mặc định ẩn và sẽ hiển thị khi chuột chạm vào (xem dưới). Lưu ý rằng chiều rộng tối thiểu được thiết lập là 160px. Bạn có thể thay đổi giá trị này theo nhu cầu. Lưu ý: Nếu bạn muốn chiều rộng của nội dung trình đơn kéo xuống bằng với nút kéo xuống, bạn có thể thiết lập chiều rộng là 100% (và sử dụng trên màn hình nhỏ) overflow:auto để kích hoạt cuộn trượt).

chúng tôi không sử dụng viền mà sử dụng box-shadow thuộc tính để trình đơn kéo xuống trông như một tấm thẻ “卡片”. Chúng tôi cũng sử dụng z-index Đặt trình đơn kéo xuống trước các yếu tố khác.

:hover Chọn器 được sử dụng để hiển thị menu cuộn khi người dùng để trỏ chuột lên nút cuộn