Como pesquisar/filtrar o menu suspenso

Aprenda a usar CSS e JavaScript para pesquisar itens no menu suspenso.

Crie um menu suspenso clicável

Crie um menu suspenso que aparece quando o usuário clica no botão.

Primeiro passo - Adicionar HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Menu suspenso</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Pesquisar.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">Sobre</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contato</a>
    <a href="#custom">Personalizado</a>
    <a href="#support">Suporte</a>
    <a href="#tools">Ferramentas</a>
  </div>
</div>

Explicação do exemplo:

Você pode usar qualquer elemento para abrir o menu suspenso, por exemplo, um elemento <button>, <a> ou <p>.

Use um elemento de contêiner (como <div>) para criar o menu suspenso e adicione os links do menu suspenso nele.

Envolver o botão e outro <div> com um elemento <div> para usar CSS para posicionar corretamente o menu suspenso.

Segundo passo - Adicionar CSS:

/* Botão de menu suspenso */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Botão do menu suspenso ao passar o mouse e ao focar */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Campo de pesquisa */
#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 a caixa de entrada de pesquisa ganha foco / é clicada */
#myInput:focus {outline: 3px solid #ddd;}
/* Contêiner <div> - usado para posicionar o conteúdo do menu suspenso */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Conteúdo do menu suspenso (por padrão, está oculto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Links dentro do menu suspenso */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Mudar a cor do link ao passar o mouse sobre o menu suspenso */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Mostrar menu suspenso (ao clicar no botão do menu suspenso, use JS para adicionar essa classe ao contêiner .dropdown-content) */
.show {display:block;}

Explicação do exemplo:

Já estilizamos o botão dropdown do menu, incluindo cor de fundo, margem interna, efeito ao passar o mouse, etc.

.dropdown a classe é usada position:relativeporque queremos que o conteúdo dropdown esteja exatamente abaixo do botão dropdown (usando position:absolute implementação).

.dropdown-content a classe contém o menu dropdown real. Padrão, ele está oculto e é exibido ao passar o mouse (veja a seguir). Nota:min-width definido como 230px. Você pode modificá-lo conforme necessário. Dica: Se você quiser que a largura do conteúdo dropdown seja igual ao botão dropdown, você pode definir width Definido como 100%（e overflow Definido como auto, para ativar a rolagem em telas pequenas).

A caixa de pesquisa (#myInput) já foi estilizada para se adaptar ao menu dropdown interno. Adicionamos um ícone de pesquisa no lado esquerdo da caixa de pesquisa, indicando que, na verdade, é uma caixa de pesquisa.

Terceiro passo - Adicionar JavaScript:

/* Quando o usuário clicar no botão, alternar entre ocultar e mostrar o conteúdo dropdown */
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";
    }
  }
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Menu suspenso CSS

Tutorial:Como criar um menu suspenso ativo