Crie uma barra de pesquisa oculta com HTML, CSS e JavaScript

Elementos GUI interativos tornam seu aplicativo mais fácil de usar. O HTML inclui vários componentes de formulário por padrão, mas você vai querer usar CSS para que eles se ajustem ao seu design. Você também pode usar JavaScript para estender ou modificar seu comportamento.

Você pode criar esses componentes usando uma biblioteca como o Tailwind, mas também é útil saber como criá-los do zero.

Descubra como criar uma barra de pesquisa oculta usando HTML, CSS e JavaScript.

Crie a estrutura de conteúdo com HTML

Aqui está o código HTML para o recurso. Você terá um elemento pai que contém uma entrada e um elemento de botão. Você também importará scripts incríveis de fontes para o ícone de pesquisa. Nesse caso, você usará o ícone de pesquisa da lupa.

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8" />
<metahttp-equiv="Compatível com X-UA"contente="IE=borda" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0" />

instagram viewer

<roteiroorigem=" https://kit.fontawesome.com/d69fb28507.js"origem cruzada="anônimo">roteiro>
<título>Barra de pesquisa ocultatítulo>
cabeça>

<corpo>
<divaula="pai">
<entradaaula="entrada"tipo="tipo"espaço reservado="Procurar..." />
<botãoaula="btn">
<euaula="fa-sólido fa-lupa">eu>
botão>
div>
corpo>
html>

Estilize a interface usando CSS

No arquivo CSS, você precisa atribuir ao elemento pai a posição relativa. Uma posição relativa permite que os elementos de entrada e botão se movam ao redor do pai. O propriedade de posição CSS controla vários tipos de layout, por isso é importante entender.

Você também alinhará os dois elementos no centro para melhor visibilidade. Mas no seu aplicativo, você pode optar por ter a barra de pesquisa sempre que quiser. Além disso, dê a ambos os elementos a mesma largura para que pareçam do mesmo tamanho e não um maior que o outro.

Em seguida, você deve fornecer ao pai uma classe ativa para os elementos de entrada e botão. Dessa forma, ele se transformará conforme especificado sempre que o elemento se mover.

* {
margem: 0;
preenchimento: 0;
dimensionamento de caixa: caixa de borda;
}
corpo {
cor de fundo: #d9d9d9;
altura: 100vh;
mostrar: flex;
itens de alinhamento: Centro;
justificar-conteúdo: Centro;
}
.pai {
posição: relativo;
}
.entrada {
contorno: nenhum;
fronteira: nenhum;
raio da borda: 100px;
preenchimento: 5px 10px;
largura: 40px;
transição: largura 00,3sfacilidade;
}
.entrada::espaço reservado {
cor: verde;
}
.pai.ativo.entrada {
largura: 200px;
}
.btn {
largura: 40px;
preenchimento: 5px 10px;
cursor: ponteiro;
raio da borda: 100px;
fronteira: nenhum;
fundo: verde;
mostrar: em linha;
Sombra da caixa: 0 0 5pxrgba(0, 0, 0, 0.2);
posição: absoluto;
principal: 0;
esquerda: 0;
transição: transformar 00,3sfacilidade;
}
.pai.ativo.btn {
transformar: traduzirX(210px);
}
.fa-solid {
cor: #ffffff;
}

Você deve ter um botão de pesquisa com a seguinte aparência:

Adicionar Funcionalidade JavaScript

Em seguida, escreva o código JavaScript para os elementos. Primeiro, selecione os elementos pai, entrada e botão usando o JavaScript querySelector() método.

Em seguida, adicione um ouvinte de evento de clique ao botão. Assim, quando clicado, o botão alterna de acordo com a turma selecionada. Adicione o foco() para definir o foco no elemento especificado. Ele começa a piscar sempre que a barra de pesquisa se expande.

deixar entrada = documento.querySelector(".entrada");
deixar btn = documento.querySelector(".btn");
deixar pai = documento.querySelector(".pai");
btn.addEventListener("clique", () => {
 parent.classList.toggle("ativo");
 input.focus();
});

Se você clicar no botão, ele abre a barra de pesquisa e vice-versa. Ele aparece como mostrado no diagrama a seguir:

Agora, se você digitar as informações e clicar no botão, ele fecha enquanto o sistema procura as informações.

Legal, não é? Você pode ver este código e brincar com a barra de pesquisa em codepen.io. Você pode personalizar ainda mais a barra de pesquisa criando um lista da barra de pesquisa de itens. Isso torna mais fácil para seus usuários fazerem pesquisas no aplicativo.

Outros recursos que você pode criar

Como iniciante em desenvolvimento web, há muitos recursos que você pode criar com HTML, CSS e JavaScript. Você pode criar uma janela pop-up/modal, um controle deslizante de imagem, um atualizador automático de rodapé e muito mais.

Esses projetos criativos são ótimos para aprender conceitos de programação. Você pode aplicar as habilidades à medida que as aprende, o que aumenta a utilidade da habilidade. Além disso, você pode criar ótimas interfaces de usuário que você e seus usuários irão gostar. Use este guia para criar uma barra de pesquisa oculta e outros recursos interativos para seu site.