Jak wyszukiwać/ filtrować menu rozwijane

Naucz się, jak używać CSS i JavaScript do wyszukiwania elementów w menu rozwijanym.

Utwórz klikalne menu rozwijane

Utwórz menu rozwijane, które po kliknięciu przez użytkownika zostanie wyświetlone.

Krok 1 - Dodaj HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Rozwiń menu</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Wyszukiwanie..." id="myInput" onkeyup="filterFunction()">
    <a href="#about">O nas</a>
    <a href="#base">Podstawy</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Kontakt</a>
    <a href="#custom">Personalizacja</a>
    <a href="#support">Wsparcie</a>
    <a href="#tools">Narzędzia</a>
  </div>
</div>

Przykład wyjaśnienia:

Możesz otworzyć menu rozwijane za pomocą dowolnego elementu, na przykład przycisku <button>, elementu <a> lub <p>.

Utwórz menu rozwijane za pomocą elementu kontenerowego (np. <div>) i dodaj do niego linki menu.

Otocz przycisk i inny element <div>, aby dokładnie ustawić menu rozwijane za pomocą CSS.

Krok 2 - Dodaj CSS:

/* Spuszczenie menu przycisku */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Przycisk menu rozwijanego przy nawigacji myszą i fokusie */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Pola wyszukiwania */
#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;
}
/* Kiedy pole wyszukiwania uzyskuje fokus lub jest kliknięte */
#myInput:focus {outline: 3px solid #ddd;}
/* Kontener <div> - używany do pozycjonowania zawartości menu rozwijanego */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Zawartość menu rozwijanego (domyślnie ukryta) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Linki w menu rozwijanym */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Zmień kolor linków menu rozwijanego podczas nawigacji myszą */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Wyświetl menu rozwijane (gdy użytkownik kliknie przycisk menu rozwijanego, użyj JS, aby dodać ten klasę do kontenera .dropdown-content) */
.show {display:block;}

Przykład wyjaśnienia:

Zaprojektowaliśmy przycisk menu rozwijanego, w tym kolor tła, wewnętrzną margines, efekt najechania itp.

.dropdown klasa używa position:relativeponieważ chcemy, aby zawartość rozwijana znajdowała się dokładnie pod przyciskiem rozwijanym (poprzez użycie position:absolute implementacji).

.dropdown-content klasa zawiera rzeczywiste menu rozwijane. Domyślnie jest ukryty i jest wyświetlany przy najechaniu (patrz niżej). Uwaga:min-width jest ustawiony na 230px. Możesz go zmienić według potrzeb. Wskazówka: Jeśli chcesz, aby szerokość zawartości rozwijanej była taka sama jak szerokość przycisku rozwijanego, możesz ustawić width ustaw na 100% (i) overflow Ustaw na auto, aby w małych ekranach umożliwić przewijanie).

Pole wyszukiwania (#myInput) zostało zaprojektowane wizualnie, aby pasować do menu rozwijanego. Dodaliśmy ikonę wyszukiwania po lewej stronie pola wyszukiwania, aby wskazać, że to rzeczywiście pole wyszukiwania.

Krok 3 - Dodaj JavaScript:

/* Kiedy użytkownik kliknie przycisk, przełączaj między ukryciem i wyświetlaniem zawartości rozwijanej */
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 = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

Spróbuj sam

Strony związane

Tutorial:CSS menu rozwijane

Tutorial:Jak stworzyć menu rozwijane z podtrzymywanym stanem