Como criar uma lista suspensa html, css e java script
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como criar uma lista suspensa html, css e java script
Olá, Gustavo! Tudo bem com você?
Vou te mostrar um exemplo bem simples de como você pode fazer isso. Primeiro, vamos criar a estrutura HTML para a lista suspensa:
<div class="dropdown">
<input type="text" placeholder="Pesquisar.." id="myInput" onkeyup="filterFunction()">
<div id="myDropdown" class="dropdown-content">
<a href="#about">Sobre</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contato</a>
<a href="#custom">Custom</a>
<a href="#support">Suporte</a>
<a href="#tools">Ferramentas</a>
</div>
</div>
Agora, vamos adicionar algum estilo CSS para torná-lo mais agradável:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a:hover {background-color: #ddd;}
Finalmente, vamos adicionar a funcionalidade JavaScript para tornar a lista suspensa pesquisável:
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";
}
}
}
Essa função JavaScript irá filtrar as opções da lista suspensa com base no que o usuário digitar na caixa de pesquisa.
Lembre-se que este é um exemplo básico e pode não atender a todas as suas necessidades, mas espero que sirva como um bom ponto de partida para você.
Espero ter ajudado e caso tenha mais perguntas ou dúvidas acerca deste tópico, estarei à disposição.
Grande abraço e bons estudos!