Vytvořte skrytý vyhledávací panel pomocí HTML, CSS a JavaScriptu

Interaktivní prvky GUI usnadňují používání vaší aplikace. HTML ve výchozím nastavení obsahuje několik komponent formuláře, ale budete chtít použít CSS, aby odpovídaly vašemu návrhu. K rozšíření nebo úpravě jejich chování můžete také použít JavaScript.

Takové komponenty můžete vytvořit pomocí knihovny, jako je Tailwind, ale je užitečné vědět, jak je vytvořit také od začátku.

Zjistěte, jak vytvořit skrytý vyhledávací panel pomocí HTML, CSS a JavaScriptu.

Vytvořte strukturu obsahu pomocí HTML

Zde je HTML kód funkce. Budete mít nadřazený prvek, který obsahuje prvek vstupu a tlačítka. Budete také importovat skripty úžasného písma pro ikonu vyhledávání. V tomto případě použijete ikonu vyhledávání s lupou.

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8" />
<metahttp-ekviv="X-UA-kompatibilní"obsah="IE=hrana" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0" />
<skriptsrc=" https://kit.fontawesome.com/d69fb28507.js"crossorigin="anonymní">





instagram viewer
skript>
<titul>Skrytá vyhledávací lištatitul>
hlava>

<tělo>
<divtřída="rodič">
<vstuptřída="vstup"typ="typ"zástupný symbol="Vyhledávání..." />
<knoflíktřída="btn">
<itřída="fa-solid fa-lupa">i>
knoflík>
div>
tělo>
html>

Styl rozhraní pomocí CSS

V souboru CSS musíte nadřazenému prvku přiřadit relativní pozici. Relativní poloha umožňuje vstupním a tlačítkovým prvkům pohybovat se kolem rodiče. The CSS vlastnost pozice ovládá několik typů rozvržení, takže je důležité mu porozumět.

Pro lepší viditelnost také zarovnáte oba prvky na střed. Ale ve své aplikaci si můžete zvolit, že budete mít vyhledávací panel, kdykoli budete chtít. Také dejte oběma prvkům stejnou šířku, aby vypadaly stejně velké a ne jeden větší než druhý.

Potom musíte nadřazenému prvku přidělit aktivní třídu pro prvky input i button. Tímto způsobem se bude transformovat podle zadání, kdykoli se prvek pohne.

* {
okraj: 0;
vycpávka: 0;
velikost krabice: border-box;
}
tělo {
barva pozadí: #d9d9d9;
výška: 100vh;
Zobrazit: flex;
zarovnat-položky: centrum;
ospravedlnit-obsah: centrum;
}
.rodič {
pozice: relativní;
}
.vstup {
obrys: žádný;
okraj: žádný;
hraniční poloměr: 100px;
vycpávka: 5px 10px;
šířka: 40px;
přechod: šířka 00,3 sulehčit;
}
.vstup::zástupný symbol {
barva: zelená;
}
.rodič.aktivní.vstup {
šířka: 200px;
}
.btn {
šířka: 40px;
vycpávka: 5px 10px;
kurzor: ukazatel;
hraniční poloměr: 100px;
okraj: žádný;
Pozadí: zelená;
Zobrazit: v souladu;
box-shadow: 0 0 5pxrgba(0, 0, 0, 0.2);
pozice: absolutní;
horní: 0;
vlevo, odjet: 0;
přechod: přeměnit 00,3 sulehčit;
}
.rodič.aktivní.btn {
přeměnit: překládatX(210px);
}
.fa-pevná {
barva: #ffffff;
}

Tlačítko vyhledávání by mělo vypadat takto:

Přidejte funkcionalitu JavaScriptu

Dále napište kód JavaScript pro prvky. Nejprve pomocí JavaScriptu vyberte nadřazené prvky, prvky vstupu a tlačítka querySelector() metoda.

Poté k tlačítku přidejte posluchač události kliknutí. Po kliknutí se tedy tlačítko přepne podle vybrané třídy. Přidat soustředit se() metoda pro nastavení fokusu na zadaný prvek. Začne blikat, kdykoli se rozbalí vyhledávací pole.

nechat vstup = dokument.querySelector(".vstup");
nechat btn = dokument.querySelector(".btn");
nechat rodič = dokument.querySelector(".rodič");
btn.addEventListener("kliknout", () => {
 parent.classList.toggle("aktivní");
 input.focus();
});

Pokud kliknete na tlačítko, otevře se vyhledávací lišta a naopak. Vypadá to, jak je znázorněno na následujícím diagramu:

Nyní, když zadáte informace a kliknete na tlačítko, zavře se, protože systém hledá informace.

Skvělé, že? Můžete vidět tento kód a hrát si se zapnutým vyhledávacím polem codepen.io. Vyhledávací panel můžete dále přizpůsobit vytvořením a seznam vyhledávací lišty položek. To uživatelům usnadňuje vyhledávání v aplikaci.

Další funkce, které můžete vytvořit

Jako začátečník ve vývoji webu můžete vytvořit mnoho funkcí pomocí HTML, CSS a JavaScriptu. Můžete vytvořit vyskakovací/modální okno, jezdec obrázku, automatickou aktualizaci zápatí a mnoho dalších.

Takové kreativní projekty jsou skvělé pro učení konceptů programování. Dovednosti můžete aplikovat, když se je učíte, což zvyšuje užitečnost dovednosti. Můžete také vytvářet skvělá uživatelská rozhraní, která si vy i vaši uživatelé užijete. Pomocí této příručky vytvořte pro svůj web skrytý vyhledávací panel a další interaktivní funkce.