Cách tạo: Thanh điều hướng drop-down

Trang trước Thanh menu thả ở thanh điều hướng đầu
Trang tiếp theo Thanh điều hướng phản hồi có danh sách thả xuống

Học cách thêm drop-down vào thanh điều hướng.

Drop-down trong thanh điều hướng

Tạo thanh điều hướng drop-down

Bước 1 - Thêm HTML：

<div class="sidenav">
  <a href="#about">Giới thiệu</a>
  <a href="#services">Dịch vụ</a>
  <a href="#clients">Khách hàng</a>
  <a href="#contact">Liên hệ</a>
  <button class="dropdown-btn">Mở rộng
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <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>
  <a href="#contact">Tìm kiếm</a>
</div>

Giải thích ví dụ:

Mở menu mở rộng bằng bất kỳ phần tử nào, ví dụ <button>, <a> hoặc phần tử <p>.

Sử dụng phần tử chứa (như <div>) để tạo menu mở rộng và thêm liên kết mở rộng vào đó. Chúng ta sẽ sử dụng cùng một样 thức cho tất cả các liên kết trong thanh điều hướng.

Bước 2 - Thêm CSS:

/* Đặt thanh điều hướng cố định, toàn chiều cao */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* Đặt样 thức cho liên kết bên cạnh và nút mở rộng */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* Khi trỏ chuột vào */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* Nội dung chính */
.main {
  margin-left: 200px; /* Cùng với độ rộng của thanh bên */
  font-size: 20px; /* Lớn văn bản để cho phép cuộn */
  padding: 0px 10px;
}
/* Thêm lớp hoạt động cho nút menu thả hoạt động */
.active {
  background-color: green;
  color: white;
}
/* Kết容器 menu thả (mặc định ẩn). Tùy chọn: Thêm màu nền sáng hơn và một số lề trái để thay đổi thiết kế nội dung menu thả */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* Tùy chọn: Đặt樣式 cho biểu tượng mũi tên xuống */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Thử ngay

Bước 3 - Thêm JavaScript:

/* Duyệt qua tất cả các nút menu thả để chuyển đổi giữa việc ẩn và hiển thị nội dung menu thả - điều này cho phép người dùng có nhiều menu thả mà không xảy ra bất kỳ xung đột nào */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Thử ngay