Erstellen Sie eine versteckte Suchleiste mit HTML, CSS und JavaScript

Interaktive GUI-Elemente erleichtern die Nutzung Ihrer Anwendung. HTML enthält standardmäßig mehrere Formularkomponenten, aber Sie sollten CSS verwenden, damit sie zu Ihrem Design passen. Sie können auch JavaScript verwenden, um ihr Verhalten zu erweitern oder zu ändern.

Sie können solche Komponenten mit einer Bibliothek wie Tailwind erstellen, aber es ist auch hilfreich zu wissen, wie man sie von Grund auf neu erstellt.

Erfahren Sie, wie Sie mit HTML, CSS und JavaScript eine versteckte Suchleiste erstellen.

Erstellen Sie die Inhaltsstruktur mit HTML

Hier ist der HTML-Code für die Funktion. Sie haben ein übergeordnetes Element, das ein Eingabe- und ein Schaltflächenelement enthält. Sie werden auch geniale Skripte für das Suchsymbol importieren. In diesem Fall verwenden Sie das Lupen-Suchsymbol.

html>
<htmllang="de">
<Kopf>
<MetaZeichensatz="UTF-8" />
<Metahttp-Äquiv="X-UA-kompatibel"Inhalt="IE=Kante" />





instagram viewer

<MetaName="Ansichtsfenster"Inhalt="Breite = Gerätebreite, Anfangsskalierung = 1,0" />
<SkriptQuelle=" https://kit.fontawesome.com/d69fb28507.js"Crossorigin="anonym">Skript>
<Titel>Versteckte SuchleisteTitel>
Kopf>

<Körper>
<divKlasse="Elternteil">
<EingangKlasse="Eingang"Typ="Typ"Platzhalter="Suchen..." />
<TasteKlasse="btn">
<ichKlasse="fa-solid fa-lupe">ich>
Taste>
div>
Körper>
html>

Gestalten Sie die Benutzeroberfläche mit CSS

In der CSS-Datei müssen Sie dem übergeordneten Element die relative Position zuweisen. Eine relative Position ermöglicht es den Eingabe- und Schaltflächenelementen, sich um das übergeordnete Element zu bewegen. Der CSS-Positionseigenschaft steuert mehrere Arten von Layouts, daher ist es wichtig, es zu verstehen.

Sie werden auch beide Elemente zur besseren Sichtbarkeit in der Mitte ausrichten. Aber in Ihrer Anwendung können Sie wählen, ob Sie die Suchleiste haben möchten, wann immer Sie möchten. Geben Sie auch beiden Elementen die gleiche Breite, damit sie gleich groß aussehen und nicht größer als das andere.

Dann müssen Sie dem übergeordneten Element eine aktive Klasse sowohl für die Eingabe- als auch für die Schaltflächenelemente zuweisen. Auf diese Weise wird es wie angegeben transformiert, wenn sich das Element bewegt.

* {
Rand: 0;
Polsterung: 0;
Box-Größe: Border-Box;
}
Körper {
Hintergrundfarbe: #d9d9d9;
Höhe: 100vh;
Anzeige: biegen;
Ausrichtungselemente: Center;
rechtfertigen-Inhalt: Center;
}
.Elternteil {
Position: relativ;
}
.Eingang {
Umriss: keiner;
Grenze: keiner;
Grenzradius: 100px;
Polsterung: 5px 10px;
Breite: 40px;
Übergang: Breite 00,3 SekLeichtigkeit;
}
.Eingang::Platzhalter {
Farbe: Grün;
}
.Elternteil.aktiv.Eingang {
Breite: 200px;
}
.btn {
Breite: 40px;
Polsterung: 5px 10px;
Mauszeiger: Zeiger;
Grenzradius: 100px;
Grenze: keiner;
Hintergrund: Grün;
Anzeige: im Einklang;
Box Schatten: 0 0 5pxRGB(0, 0, 0, 0.2);
Position: absolut;
Spitze: 0;
links: 0;
Übergang: verwandeln 00,3 SekLeichtigkeit;
}
.Elternteil.aktiv.btn {
verwandeln: übersetzenX(210px);
}
.fa-fest {
Farbe: #ffffff;
}

Sie sollten eine Suchschaltfläche haben, die so aussieht:

JavaScript-Funktionalität hinzufügen

Schreiben Sie als Nächstes JavaScript-Code für die Elemente. Wählen Sie zuerst die Eltern-, Eingabe- und Schaltflächenelemente mit JavaScript aus querySelector() Methode.

Fügen Sie dann der Schaltfläche einen Click-Ereignis-Listener hinzu. Wenn Sie also darauf klicken, schaltet die Schaltfläche entsprechend der ausgewählten Klasse um. Ergänzen Sie die Fokus() -Methode, um den Fokus auf das angegebene Element zu setzen. Es beginnt zu blinken, wenn die Suchleiste erweitert wird.

lassen Eingabe = dokumentieren.querySelector(".Eingang");
lassen btn = dokumentieren.querySelector(".btn");
lassen Elternteil = dokumentieren.querySelector(".Elternteil");
btn.addEventListener("klicken", () => {
 parent.classList.toggle("aktiv");
 input.focus();
});

Wenn Sie auf die Schaltfläche klicken, öffnet sich die Suchleiste und umgekehrt. Es sieht wie im folgenden Diagramm aus:

Wenn Sie jetzt Informationen eingeben und auf die Schaltfläche klicken, wird es geschlossen, während das System nach den Informationen sucht.

Cool, oder? Sie können diesen Code sehen und mit eingeschalteter Suchleiste herumspielen codepen.io. Sie können die Suchleiste weiter anpassen, indem Sie eine erstellen Suchleistenliste von Artikeln. Dies erleichtert Ihren Benutzern die Suche in der App.

Andere Funktionen, die Sie erstellen können

Als Anfänger in der Webentwicklung gibt es viele Funktionen, die Sie mit HTML, CSS und JavaScript erstellen können. Sie können ein Popup-/Modalfenster, einen Bildschieber, einen automatischen Footer-Updater und vieles mehr erstellen.

Solche kreativen Projekte eignen sich hervorragend zum Erlernen von Programmierkonzepten. Sie können Fähigkeiten anwenden, während Sie sie lernen, was die Nützlichkeit der Fähigkeit erhöht. Außerdem können Sie großartige Benutzeroberflächen erstellen, die Ihnen und Ihren Benutzern gefallen werden. Verwenden Sie diese Anleitung, um eine versteckte Suchleiste und andere interaktive Funktionen für Ihre Website zu erstellen.