Maak een verborgen zoekbalk met HTML, CSS en JavaScript

Interactieve GUI-elementen maken uw applicatie gebruiksvriendelijker. HTML bevat standaard verschillende formuliercomponenten, maar u wilt CSS gebruiken zodat ze bij uw ontwerp passen. U kunt ook JavaScript gebruiken om hun gedrag uit te breiden of aan te passen.

U kunt dergelijke componenten maken met behulp van een bibliotheek zoals Tailwind, maar het is ook handig om te weten hoe u ze vanaf het begin kunt maken.

Ontdek hoe u een verborgen zoekbalk kunt maken met behulp van HTML, CSS en JavaScript.

Maak de inhoudsstructuur met HTML

Hier is de HTML-code voor de functie. Je hebt een bovenliggend element dat een invoer- en een knopelement bevat. U importeert ook lettertype-geweldige scripts voor het zoekpictogram. In dit geval gebruikt u het vergrootglas-zoekpictogram.

html>
<htmllang="en">
<hoofd>
<metatekenset="UTF-8" />
<metahttp-equivalent="X-UA-compatibel"inhoud="IE=rand" />
<metanaam="uitkijk postje"inhoud="breedte=apparaatbreedte, beginschaal=1.0" />





instagram viewer

<scriptsrc=" https://kit.fontawesome.com/d69fb28507.js"kruisoorsprong="anoniem">script>
<titel>Verborgen zoekbalktitel>
hoofd>

<lichaam>
<divklas="ouder">
<invoerklas="invoer"type="type"tijdelijke aanduiding="Zoekopdracht..." />
<knopklas="btn">
<iklas="fa-vast fa-vergrootglas">i>
knop>
div>
lichaam>
html>

Stijl de interface met behulp van CSS

In het CSS-bestand moet u het bovenliggende element de positie van relatief geven. Door een relatieve positie kunnen de invoer- en knopelementen rond de ouder bewegen. De CSS-positie-eigenschap bestuurt verschillende soorten lay-out, dus het is belangrijk om te begrijpen.

U lijnt ook beide elementen in het midden uit voor een betere zichtbaarheid. Maar in uw toepassing kunt u ervoor kiezen om de zoekbalk te gebruiken wanneer u maar wilt. Geef ook beide elementen dezelfde breedte zodat ze er even groot uitzien en niet het ene groter dan het andere.

Vervolgens moet u de ouder een actieve klasse geven voor zowel het invoer- als het knopelement. Op deze manier transformeert het zoals gespecificeerd wanneer het element beweegt.

* {
marge: 0;
opvulling: 0;
maatvoering van de doos: border-box;
}
lichaam {
Achtergrond kleur: #d9d9d9;
hoogte: 100vh;
weergave: buigen;
uitlijnen-items: centrum;
rechtvaardigen-inhoud: centrum;
}
.ouder {
positie: familielid;
}
.invoer {
overzicht: geen;
grens: geen;
grensradius: 100px;
opvulling: 5px 10px;
breedte: 40px;
overgang: breedte 0.3sgemak;
}
.invoer::plaatshouder {
kleur: groente;
}
.ouder.actief.invoer {
breedte: 200px;
}
.btn {
breedte: 40px;
opvulling: 5px 10px;
cursor: wijzer;
grensradius: 100px;
grens: geen;
achtergrond: groente;
weergave: in lijn;
doos-schaduw: 0 0 5pxRGBA(0, 0, 0, 0.2);
positie: absoluut;
bovenkant: 0;
links: 0;
overgang: transformeren 0.3sgemak;
}
.ouder.actief.btn {
transformeren: vertalenX(210px);
}
.fa-vast {
kleur: #ffffff;
}

Je zou een zoekknop moeten hebben die er zo uitziet:

Voeg JavaScript-functionaliteit toe

Schrijf vervolgens JavaScript-code voor de elementen. Selecteer eerst de ouder-, invoer- en knopelementen met behulp van JavaScript vraagSelector() methode.

Voeg vervolgens een klikgebeurtenislistener toe aan de knop. Dus wanneer erop wordt geklikt, wisselt de knop volgens de geselecteerde klasse. Voeg de focus() methode om de focus op het opgegeven element in te stellen. Het begint te knipperen wanneer de zoekbalk groter wordt.

laten invoer = document.querySelector(".invoer");
laten btn = document.querySelector(".btn");
laten ouder = document.querySelector(".ouder");
btn.addEventListener("Klik", () => {
 parent.classList.toggle("actief");
 invoer.focus();
});

Als u op de knop klikt, wordt de zoekbalk geopend en vice versa. Het ziet eruit zoals weergegeven in het volgende diagram:

Als u nu informatie typt en op de knop klikt, wordt deze gesloten terwijl het systeem naar de informatie zoekt.

Cool, toch? Je kunt deze code zien en spelen met de zoekbalk aan codepen.io. U kunt de zoekbalk verder aanpassen door een zoekbalk lijst van artikelen. Dit maakt het voor uw gebruikers gemakkelijker om zoekopdrachten in de app uit te voeren.

Andere functies die u kunt creëren

Als beginner in webontwikkeling zijn er veel functies die u kunt maken met HTML, CSS en JavaScript. U kunt een pop-up/modaal venster, een schuifregelaar voor afbeeldingen, een automatische updater voor voetteksten en nog veel meer maken.

Dergelijke creatieve projecten zijn geweldig om programmeerconcepten te leren. Je kunt vaardigheden toepassen terwijl je ze leert, wat het nut van de vaardigheid vergroot. U kunt ook geweldige gebruikersinterfaces maken waar u en uw gebruikers van zullen genieten. Gebruik deze gids om een ​​verborgen zoekbalk en andere interactieve functies voor uw site te maken.