Utwórz ukryty pasek wyszukiwania za pomocą HTML, CSS i JavaScript

Interaktywne elementy GUI ułatwiają korzystanie z aplikacji. HTML zawiera domyślnie kilka komponentów formularzy, ale będziesz chciał użyć CSS, aby pasowały do ​​​​Twojego projektu. Możesz także użyć JavaScript, aby rozszerzyć lub zmodyfikować ich zachowanie.

Możesz tworzyć takie komponenty za pomocą biblioteki takiej jak Tailwind, ale warto też wiedzieć, jak tworzyć je od podstaw.

Dowiedz się, jak utworzyć ukryty pasek wyszukiwania za pomocą HTML, CSS i JavaScript.

Utwórz strukturę treści za pomocą HTML

Oto kod HTML tej funkcji. Będziesz mieć element nadrzędny, który zawiera element wejściowy i przycisk. Zaimportujesz również wspaniałe skrypty dla ikony wyszukiwania. W takim przypadku użyjesz ikony wyszukiwania z lupą.

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8” />
<metaodpowiednik http=„Zgodny z X-UA”treść=„IE=krawędź” />
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0” />





instagram viewer

<scenariuszźródło=" https://kit.fontawesome.com/d69fb28507.js"krzyżowe pochodzenie="anonimowy">scenariusz>
<tytuł>Ukryty pasek wyszukiwaniatytuł>
głowa>

<ciało>
<dzklasa="rodzic">
<wejścieklasa="wejście"typ="typ"symbol zastępczy="Szukaj..." />
<przyciskklasa="btn">
<Iklasa="fa-lite fa-szkło powiększające">I>
przycisk>
dz>
ciało>
HTML>

Stylizuj interfejs za pomocą CSS

W pliku CSS musisz nadać elementowi nadrzędnemu pozycję względną. Pozycja względna umożliwia elementom wejściowym i przyciskowym poruszanie się po obiekcie nadrzędnym. The Właściwość pozycji CSS kontroluje kilka typów układu, więc jego zrozumienie jest ważne.

Wyrównaj również oba elementy na środku, aby uzyskać lepszą widoczność. Ale w swojej aplikacji możesz wybrać pasek wyszukiwania, kiedy tylko chcesz. Ponadto nadaj obu elementom tę samą szerokość, aby wyglądały na ten sam rozmiar, a żaden nie był większy od drugiego.

Następnie musisz dać rodzicowi aktywną klasę zarówno dla elementów wejściowych, jak i przycisków. W ten sposób przekształci się w określony sposób za każdym razem, gdy element się poruszy.

* {
margines: 0;
wyściółka: 0;
rozmiar pudełka: ramka;
}
ciało {
kolor tła: #d9d9d9;
wysokość: 100vh;
wyświetlacz: przewód;
wyrównaj elementy: Centrum;
uzasadnij treść: Centrum;
}
.rodzic {
pozycja: względny;
}
.wejście {
zarys: nic;
granica: nic;
promień granicy: 100piks;
wyściółka: 5piks 10piks;
szerokość: 40piks;
przemiana: szerokość 00,3słatwość;
}
.wejście::symbol zastępczy {
kolor: zielony;
}
.rodzic.aktywny.wejście {
szerokość: 200piks;
}
.btn {
szerokość: 40piks;
wyściółka: 5piks 10piks;
kursor: wskaźnik;
promień granicy: 100piks;
granica: nic;
tło: zielony;
wyświetlacz: w linii;
pudełko-cień: 0 0 5piksrgba(0, 0, 0, 0.2);
pozycja: absolutny;
szczyt: 0;
lewy: 0;
przemiana: przekształcać 00,3słatwość;
}
.rodzic.aktywny.btn {
przekształcać: przetłumaczX(210piks);
}
.fa-solid {
kolor: #ffffff;
}

Powinieneś mieć przycisk wyszukiwania wyglądający tak:

Dodaj funkcjonalność JavaScript

Następnie napisz kod JavaScript dla elementów. Najpierw wybierz elementy nadrzędne, wejściowe i przycisk za pomocą JavaScript zapytanieSelektor() metoda.

Następnie dodaj detektor zdarzeń kliknięcia do przycisku. Po kliknięciu przycisk przełącza się zgodnie z wybraną klasą. Dodaj centrum() metoda ustawiania fokusu na określonym elemencie. Zaczyna migać, gdy pasek wyszukiwania się rozwija.

pozwalać wejście = dokument.querySelector(".wejście");
pozwalać btn = dokument.querySelector(".btn");
pozwalać rodzic = dokument.querySelector(".rodzic");
btn.addEventListener("Kliknij", () => {
 rodzic.listaklas.toggle("aktywny");
 input.focus();
});

Jeśli klikniesz przycisk, otworzy się pasek wyszukiwania i odwrotnie. Wygląda to tak, jak pokazano na poniższym schemacie:

Teraz, jeśli wpiszesz informacje i klikniesz przycisk, zamknie się on, gdy system wyszukuje informacje.

Fajne, prawda? Możesz zobaczyć ten kod i bawić się z włączonym paskiem wyszukiwania codepen.io. Możesz dodatkowo dostosować pasek wyszukiwania, tworząc plik lista paska wyszukiwania przedmiotów. Ułatwi to użytkownikom wyszukiwanie w aplikacji.

Inne funkcje, które możesz stworzyć

Jako początkujący w tworzeniu stron internetowych możesz tworzyć wiele funkcji za pomocą HTML, CSS i JavaScript. Możesz utworzyć okno wyskakujące/modalne, suwak obrazu, automatyczną aktualizację stopki i wiele innych.

Takie kreatywne projekty świetnie nadają się do nauki koncepcji programowania. Umiejętności można stosować w miarę ich uczenia się, co zwiększa ich przydatność. Możesz także tworzyć świetne interfejsy użytkownika, które spodobają się Tobie i Twoim użytkownikom. Skorzystaj z tego przewodnika, aby utworzyć ukryty pasek wyszukiwania i inne interaktywne funkcje w swojej witrynie.