Come cercare/ filtrare il menu a discesa

Impara come utilizzare CSS e JavaScript per cercare elementi in un menu a discesa.

Crea un menu a discesa cliccabile

Crea un menu a discesa che appare quando l'utente clicca sul pulsante.

Primo passo - Aggiungi HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Menu a discesa</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Cerca.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">Informazioni</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contatti</a>
    <a href="#custom">Personalizzato</a>
    <a href="#support">Supporto</a>
    <a href="#tools">Strumenti</a>
  </div>
</div>

Esempio di spiegazione:

Puoi aprire il menu a discesa con qualsiasi elemento, ad esempio un pulsante <button>, un elemento <a> o <p>.

Crea un menu a discesa utilizzando un elemento contenitore (come <div>) e aggiungi i link del menu a discesa al suo interno.

Avvolgi il pulsante e un altro <div> con un elemento <div> per posizionare correttamente il menu a discesa con CSS.

Secondo passo - Aggiungi CSS:

/* Menu a discesa pulsante */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Pulsante del menu a discesa al mouse sopra e in fuoco */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Campo di ricerca */
#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;
}
/* Quando la casella di ricerca viene selezionata/ cliccata */
#myInput:focus {outline: 3px solid #ddd;}
/* Contenitore <div> - utilizzato per posizionare il contenuto del menu a discesa */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Contenuto del menu a discesa (di default è nascosto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Link all'interno del menu a discesa */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Modifica il colore dei link del menu a discesa quando il mouse è sopra di essi */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Visualizza il menu a discesa (quando l'utente clicca sul pulsante del menu a discesa, aggiungi questa classe al contenitore .dropdown-content) */
.show {display:block;}

Esempio di spiegazione:

Abbiamo progettato lo stile del pulsante del menu a discesa, inclusi colore di sfondo, spazi interni, effetti di hover, ecc.

.dropdown La classe utilizza position:relativeperché vogliamo che il contenuto a discesa si trovi esattamente sotto il pulsante del menu a discesa (usando position:absolute implementazione).

.dropdown-content La classe contiene il menu a discesa effettivo. Di default è nascosto e viene visualizzato quando l'utente passa il mouse sopra (vedi di seguito). Nota chemin-width è impostato su 230px. Puoi modificarlo secondo necessità. Suggerimento: se desideri che la larghezza del contenuto a discesa sia uguale alla larghezza del pulsante del menu a discesa, puoi impostare width Imposta su 100% (e) overflow Imposta su auto per abilitare lo scorrimento sulle schermate di piccolo formato).

La casella di ricerca (#myInput) è stata progettata per adattarsi all'interno del menu a discesa. Abbiamo aggiunto un'icona di ricerca, situata a sinistra della casella di ricerca, per indicare che si tratta effettivamente di una casella di ricerca.

Passo 3 - Aggiungi JavaScript:

/* Quando l'utente clicca sul pulsante, cambia tra nascondere e mostrare il contenuto a discesa */
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";
    }
  }
}

Prova personalmente

Pagine correlate

Tutorial:Menu a discesa CSS

Tutorial:Come creare menu a discesa hover