Cách tạo: Thanh điều hướng menu xuống

trang trước Danh sách rơi liên kết chéo
Trang tiếp theo Danh sách rơi trong thanh điều hướng bên

Học cách tạo thanh điều hướng menu xuống.

Menu xuống trong thanh điều hướng

Tạo thanh điều hướng menu xuống

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

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">Down</button>
      <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>

Ví dụ minh họa:

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

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

Dùng một phần tử <div> bao quanh nút và một phần tử <div> khác để định vị chính xác menu xuống bằng CSS.

Bước 2 - Thêm CSS:

/* Hộp 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;
}
/* Hộp chứa xuống */
.dropdown {
  float: trái;
  overflow: ẩn;
}
/* Nút xuống */
.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; /* Quan trọng để căn dọc trên điện thoại */
  margin: 0; /* Quan trọng cho việc dọc đối齐 trên điện thoại */
}
/* Thêm màu nền đỏ cho liên kết trong 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 trong 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

Ví dụ minh họa:

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 trong thanh đ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 hộp chứa. Do đó, nó là yếu tố <div>而不是<a>, chúng tôi phải làm 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, sẽ hiển thị khi di chuột trỏ (xem dưới). Lưu ý, chiề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 giố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 lọc được sử dụng để hiển thị menu thả khi người dùng di chuột lên nút menu thả.