Cách tìm kiếm/loại bỏ menu thả xuống

Học cách sử dụng CSS và JavaScript để tìm kiếm các mục trong menu thả xuống.

Tạo menu thả xuống có thể nhấp vào

Tạo một menu thả xuống xuất hiện 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">Thả xuống</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Tìm kiếm..." id="myInput" onkeyup="filterFunction()">
    <a href="#about">Về chúng tôi</a>
    <a href="#base">Cơ bản</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Liên hệ</a>
    <a href="#custom">Tùy chỉnh</a>
    <a href="#support">Hỗ trợ</a>
    <a href="#tools">Công cụ</a>
  </div>
</div>

Giải thích ví dụ:

Bạn có thể sử dụng bất kỳ yếu tố nào để mở menu thả xuống, ví dụ như một <button>, <a> hoặc yếu tố <p>.

Sử dụng một yếu tố chứa (như <div>) để tạo menu thả xuống và thêm các liên kết của menu thả xuống.

Bọc nút và một <div> khác bằng một <div> để định vị chính xác menu thả xuống bằng CSS.

Bước 2 - Thêm CSS:

/* Xem thêm menu */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Nút menu thả khi con trỏ trỏ hoặc tập trung */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Trường tìm kiếm */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* Khi ô tìm kiếm được tập trung hoặc được nhấp vào */
#myInput:focus {outline: 3px solid #ddd;}
/* Thùng <div> - dùng để định vị nội dung menu thả */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Nội dung menu thả (mặc định là ẩn) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Liên kết trong menu thả */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Thay đổi màu sắc liên kết khi con trỏ trỏ vào menu thả */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Hiển thị menu thả (khi người dùng nhấp vào nút menu thả, sử dụng JS để thêm lớp này vào thùng .dropdown-content) */
.show {display:block;}

Giải thích ví dụ:

Chúng tôi đã thiết kế giao diện nút menu cuộn, bao gồm màu nền, biên độ padding, hiệu ứng trỏ chuột, v.v.

.dropdown class sử dụng position:relativevì chúng tôi muốn nội dung cuộn nằm chính xác dưới nút menu cuộn (sử dụng position:absolute thực hiện).

.dropdown-content class chứa menu cuộn thực tế. Mặc định, nó được ẩn và sẽ hiển thị khi trỏ chuột (xem thêm dưới đây). Lưu ý rằngmin-width được đặt thành 230px. Bạn có thể thay đổi nó theo nhu cầu. Lưu ý rằng nếu bạn muốn chiều rộng của nội dung cuộn bằng với nút menu cuộn, bạn có thể đặt width đặt thành 100%（và overflow đặt thành auto, để kích hoạt cuộn trên màn hình nhỏ).

Hộp tìm kiếm (#myInput) đã được thiết kế giao diện để phù hợp với menu cuộn bên trong. Chúng tôi đã thêm một biểu tượng tìm kiếm, nó nằm ở bên trái hộp tìm kiếm, để chỉ ra rằng điều này thực sự là một hộp tìm kiếm.

Bước 3 - Thêm JavaScript:

/* Khi người dùng nhấp vào nút, chuyển đổi giữa ẩn và hiển thị nội dung cuộn */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    }
      a[i].style.display = "none";
    }
  }
}

thử trực tiếp

Trang liên quan

Giáo trình:Trình đơn thả xuống CSS

Giáo trình:Cách tạo trình đơn thả xuống có thể trỏ