Cách tạo: Menu thả ra có thể nhấp vào

Học cách sử dụng CSS và JavaScript để tạo menu thả ra có thể nhấp vào.

Menu thả ra

Menu thả ra là một menu có thể chuyển đổi, cho phép người dùng chọn một giá trị từ danh sách đã định trước:

Thử nghiệm trực tiếp

Tạo menu thả ra có thể nhấp vào

Tạo một menu thả ra khi người dùng nhấp vào nút.

Bước 1 - Thêm HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" 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>

Ví dụ minh họa:

Bạn có thể sử dụng bất kỳ phần tử nào để mở danh sách rơi, ví dụ như phần tử <button>、<a> hoặc <p>.

Sử dụng phần tử chứa (như <div>) để tạo danh sách rơi và thêm liên kết danh sách rơi vào đó.

Sử dụng phần tử <div> để bao bọc nút và <div> để định vị danh sách rơi bằng CSS.

Bước 2 - Thêm CSS:

/* Nút rơi */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Nút danh sách rơi khi con trỏ悬停 và tập trung */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* Hộp <div> - được sử dụng để định vị nội dung danh sách rơi */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Nội dung danh sách rơi (mặc định ẩn) */
.dropdown-content {
  display: none;
  position: absolute;
  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 danh sách rơi */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠 chiếu vào thay đổi màu sắc liên kết trong danh sách rơi */
.dropdown-content a:hover {background-color: #ddd;}
/* Hiển thị trình đơn thả xuống (khi người dùng nhấp vào nút trình đơn thả xuống, sử dụng JS để thêm lớp này vào container .dropdown-content) */
.show {display:block;}

Ví dụ minh họa:

Chúng tôi đã thiết lập các樣式 cho nút trình đơn thả xuống như màu nền, khoảng cách trong, hiệu ứng khi trỏ chuột đợi,...

.dropdown lớp sử dụng position:relative, Khi chúng tôi muốn đặt nội dung trình đơn thả xuống dưới nút trình đơn thả xuống (sử dụng position:absolute), Đây là điều cần thiết.

.dropdown-content lớp chứa trình đơn thả xuống thực tế. Nó được ẩn mặc định và sẽ hiển thị khi con trỏ chuột đợi (xem thêm). Lưu ý, độ rộng tối thiểu được đặt là 160px. Bạn có thể thay đổi giá trị này theo nhu cầu. Gợi ý: Nếu bạn muốn độ rộng của nội dung trình đơn thả xuống bằng với nút trình đơn thả xuống, hãy đặt độ rộng là 100% (và sử dụng trên màn hình nhỏ) overflow:auto để启用滚动)。

Chúng tôi không sử dụng viền mà thay vào đó sử dụng box-shadow thuộc tính, để trình đơn thả xuống trông giống như một lá "thẻ bài". z-index Đặt trình đơn thả xuống ở trước các phần tử khác.

Bước 3 - Thêm JavaScript:

/* Khi người dùng nhấp vào nút, chuyển đổi trạng thái ẩn và hiển thị của nội dung trình đơn thả xuống */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Nếu người dùng nhấp vào bên ngoài trình đơn thả xuống, hãy đóng trình đơn thả xuống
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Thử nghiệm trực tiếp

Trình đơn thả xuống phải

Thử nghiệm trực tiếp

Trình đơn thả xuống trong thanh導航

Thử nghiệm trực tiếp

Trình đơn thả xuống (lọc) tìm kiếm

Thử nghiệm trực tiếp

Trang liên quan

Hướng dẫn:Thực đơn cuộn CSS

Hướng dẫn:Cách tạo: Thực đơn cuộn có thể trượt