Създайте скрита лента за търсене с HTML, CSS и JavaScript

Интерактивните GUI елементи правят вашето приложение по-лесно за използване. HTML включва няколко компонента на формуляр по подразбиране, но вие ще искате да използвате CSS, така че да отговарят на вашия дизайн. Можете също да използвате JavaScript, за да разширите или промените тяхното поведение.

Можете да създадете такива компоненти с помощта на библиотека като Tailwind, но е полезно да знаете как да ги създадете от нулата.

Разберете как да създадете скрита лента за търсене с помощта на HTML, CSS и JavaScript.

Създайте структурата на съдържанието с HTML

Ето HTML кода за функцията. Ще имате родителски елемент, който съдържа елемент за въвеждане и бутон. Също така ще импортирате страхотни скриптове за иконата за търсене. В този случай ще използвате иконата за търсене с лупа.

html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8" />
<метаhttp-еквив=„X-UA-съвместим“съдържание="IE=ръб" />
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0" />





instagram viewer

<сценарийsrc=" https://kit.fontawesome.com/d69fb28507.js"кръстосан произход="анонимен">сценарий>
<заглавие>Скрита лента за търсенезаглавие>
глава>

<тяло>
<дивклас="родител">
<входклас="вход"Тип="Тип"контейнер="Търсене..." />
<бутонклас="btn">
<азклас="fa-твърдо fa-лупа">аз>
бутон>
див>
тяло>
html>

Стил на интерфейса с помощта на CSS

В CSS файла трябва да дадете на родителския елемент позицията на относителен. Относителната позиция позволява на елементите за въвеждане и бутоните да се движат около родителя. The Свойство CSS позиция контролира няколко типа оформление, така че е важно да го разберете.

Също така ще подравните двата елемента в центъра за по-добра видимост. Но във вашето приложение можете да изберете да имате лентата за търсене, когато пожелаете. Освен това дайте на двата елемента еднаква ширина, така че да изглеждат с еднакъв размер, а не единият по-голям от другия.

След това трябва да дадете на родителя активен клас както за елементите за въвеждане, така и за бутоните. По този начин той ще се трансформира, както е посочено, когато елементът се движи.

* {
марж: 0;
подплата: 0;
оразмеряване на кутията: гранична кутия;
}
тяло {
Цвят на фона: #d9d9d9;
височина: 100vh;
дисплей: flex;
подравняване на елементи: център;
justify-content: център;
}
.родител {
позиция: роднина;
}
.вход {
контур: нито един;
граница: нито един;
граница-радиус: 100px;
подплата: 5px 10px;
ширина: 40px;
преход: ширина 0.3sлекота;
}
.вход::заместител {
цвят: зелено;
}
.родител.активен.вход {
ширина: 200px;
}
.btn {
ширина: 40px;
подплата: 5px 10px;
курсор: показалец;
граница-радиус: 100px;
граница: нито един;
заден план: зелено;
дисплей: в редица;
кутия-сянка: 0 0 5pxrgba(0, 0, 0, 0.2);
позиция: абсолютен;
Горна част: 0;
наляво: 0;
преход: трансформирам 0.3sлекота;
}
.родител.активен.btn {
трансформирам: translateX(210px);
}
.fa-твърдо {
цвят: #ffffff;
}

Трябва да имате бутон за търсене, изглеждащ така:

Добавяне на JavaScript функционалност

След това напишете JavaScript код за елементите. Първо изберете родителския, входния и бутонния елемент с помощта на JavaScript querySelector() метод.

След това добавете слушател на събитие за щракване към бутона. Така че при щракване бутонът се превключва според избрания клас. Добавете фокус () метод за задаване на фокус върху посочения елемент. Започва да мига, когато лентата за търсене се разшири.

позволявам вход = документ.querySelector(".вход");
позволявам btn = документ.querySelector(".btn");
позволявам родител = документ.querySelector(".parent");
btn.addEventListener("клик", () => {
 parent.classList.toggle("активен");
 input.focus();
});

Ако щракнете върху бутона, той отваря лентата за търсене и обратно. Изглежда, както е показано на следната диаграма:

Сега, ако въведете информация и щракнете върху бутона, той се затваря, докато системата търси информацията.

Готино, нали? Можете да видите този код и да си поиграете с включена лента за търсене codepen.io. Можете допълнително да персонализирате лентата за търсене, като създадете a списък на лентата за търсене на елементи. Това улеснява вашите потребители да извършват търсения в приложението.

Други функции, които можете да създадете

Като начинаещ в уеб разработката има много функции, които можете да създадете с HTML, CSS и JavaScript. Можете да създадете изскачащ/модален прозорец, плъзгач за изображение, програма за автоматично обновяване на долния колонтитул и много други.

Такива творчески проекти са чудесни за изучаване на концепции за програмиране. Можете да прилагате умения, докато ги усвоявате, което увеличава полезността на умението. Освен това можете да създадете страхотни потребителски интерфейси, на които вие и вашите потребители ще се насладите. Използвайте това ръководство, за да създадете скрита лента за търсене и други интерактивни функции за вашия сайт.