Cách tạo: Nút "More" trong thanh điều hướng

trang trước Nút trang tiếp theo/trang trước
Trang tiếp theo Nút khối

Học cách tạo nút "More".

Nút "More" trong thanh điều hướng

Tạo thanh điều hướng menu thả

Khi người dùng di chuột đến phần tử trong thanh điều hướng, sẽ xuất hiện menu thả.

Bước 1 - Thêm HTML:

<div class="navbar">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-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>
</div>

Giải thích ví dụ:

Sử dụng bất kỳ phần tử nào để mở menu thả, ví dụ như phần tử <button>, <a> hoặc <p>.

Tạo menu thả bằng phần tử chứa (như <div>) và thêm liên kết menu thả vào đó.

Dùng phần tử <div> để bao bọc nút và phần tử <div> khác để định vị menu thả chính xác bằng CSS.

Bước 2 - Thêm CSS:

/* Khe chứa thanh điều hướng */
.navbar {
  overflow: ẩn;
  background-color: #333;
  font-family: Arial;
}
/* Liên kết trong thanh điều hướng */
.navbar a {
  float: trái;
  font-size: 16px;
  color: trắng;
  text-align: giữa;
  padding: 14px 16px;
  text-decoration: none;
}
/* Khe chứa menu thả */
.dropdown {
  float: trái;
  overflow: ẩn;
}
/* Nút menu thả */
.dropdown .dropbtn {
  font-size: 16px;
  border: không;
  outline: không;
  color: trắng;
  padding: 14px 16px;
  background-color: kế thừa;
  font-family: kế thừa; /* Đối齐 thẳng đứng trên điện thoại rất quan trọng */
  margin: 0; /* Quan trọng cho việc canh ngang dọc trên điện thoại */
}
/* Thêm màu nền đỏ cho liên kết thanh điều hướng khi chuột悬停 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Nội dung menu thả (mặc định ẩn) */
.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 trong menu thả */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Thêm màu nền xám cho liên kết menu thả khi chuột悬停 */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Hiển thị menu thả khi chuột悬停 */
.dropdown:hover .dropdown-content {
  display: block;
}

Thử ngay

Giải thích ví dụ:

Chúng tôi đã thiết lập các樣式 như màu nền, lề trong cho thanh điều hướng và liên kết điều hướng.

Chúng tôi đã thiết lập các樣式 như màu nền, lề trong cho nút menu thả.

.dropdown lớp là .dropdown-content thùng chứa. Do đó, đây là yếu tố <div>而不是<a>, chúng tôi phải làm cho nó trôi để đảm bảo nó ở bên cạnh liên kết.

.dropdown-content lớp chứa menu thả thực tế. Nó mặc định ẩn và sẽ hiển thị khi di chuột qua (xem thêm dưới đây). Lưu ý, độ rộng tối thiểu được thiết lập là 160px. Bạn có thể thay đổi cài đặt này tùy ý.

Chúng tôi không sử dụng viền mà sử dụng box-shadow Thuộc tính, để menu thả trông như một tấm thẻ “卡片”. Chúng tôi cũng sử dụng z-index Đặt menu thả ở trước các yếu tố khác.

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