Создайте скрытую панель поиска с помощью HTML, CSS и JavaScript

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

Вы можете создавать такие компоненты с помощью такой библиотеки, как Tailwind, но также полезно знать, как создавать их с нуля.

Узнайте, как создать скрытую панель поиска с помощью HTML, CSS и JavaScript.

Создайте структуру контента с помощью HTML

Вот HTML-код этой функции. У вас будет родительский элемент, который содержит элемент ввода и кнопку. Вы также импортируете потрясающие шрифты для значка поиска. В этом случае вы будете использовать значок поиска в виде увеличительного стекла.

HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8" />
<метаhttp-эквивалент="X-UA-совместимый"содержание="IE=край" />
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0" />

instagram viewer

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

<тело>
<дивсорт="родитель">
<входсорт="вход"тип="тип"заполнитель="Поиск..." />
<кнопкасорт="кнопка">
<ясорт="fa-solid fa-увеличительное стекло">я>
кнопка>
див>
тело>
HTML>

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

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

Вы также выровняете оба элемента по центру для лучшей видимости. Но в вашем приложении вы можете настроить отображение панели поиска в любое время. Кроме того, придайте обоим элементам одинаковую ширину, чтобы они выглядели одинакового размера, а не один больше другого.

Затем вы должны предоставить родителю активный класс как для элементов ввода, так и для кнопок. Таким образом, он будет трансформироваться, как указано, всякий раз, когда элемент перемещается.

* {
допуск: 0;
набивка: 0;
размер коробки: пограничный ящик;
}
тело {
фоновый цвет: #d9d9d9;
высота: 100вх;
отображать: сгибаться;
выравнивание элементов: центр;
выравнивание содержания: центр;
}
.родитель {
позиция: родственник;
}
.вход {
контур: никто;
граница: никто;
радиус границы: 100пикс.;
набивка: 5пикс. 10пикс.;
ширина: 40пикс.;
переход: ширина 0.3спростота;
}
.вход::заполнитель {
цвет: зеленый;
}
.родитель.активный.вход {
ширина: 200пикс.;
}
.btn {
ширина: 40пикс.;
набивка: 5пикс. 10пикс.;
курсор: указатель;
радиус границы: 100пикс.;
граница: никто;
фон: зеленый;
отображать: в соответствии;
коробка-тень: 0 0 5пикс.RGBA(0, 0, 0, 0.2);
позиция: абсолютный;
вершина: 0;
левый: 0;
переход: трансформировать 0.3спростота;
}
.родитель.активный.btn {
трансформировать: перевестиX(210пикс.);
}
.fa-твердый {
цвет: #фффффф;
}

У вас должна получиться кнопка поиска, которая выглядит так:

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

Затем напишите код JavaScript для элементов. Сначала выберите родительский элемент, элемент ввода и кнопку с помощью JavaScript селектор запросов() метод.

Затем добавьте к кнопке прослушиватель событий щелчка. Таким образом, при нажатии кнопка переключается в соответствии с выбранным классом. Добавить фокус() метод для установки фокуса на указанный элемент. Он начинает мигать всякий раз, когда панель поиска расширяется.

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

Если нажать на кнопку, откроется панель поиска и наоборот. Это выглядит так, как показано на следующей диаграмме:

Теперь, если вы введете информацию и нажмете кнопку, она закроется, пока система ищет информацию.

Круто, не так ли? Вы можете увидеть этот код и поиграться с панелью поиска на codepen.io. Вы можете дополнительно настроить панель поиска, создав список строк поиска предметов. Это упрощает пользователям поиск в приложении.

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

Если вы новичок в веб-разработке, вы можете создать множество функций с помощью HTML, CSS и JavaScript. Вы можете создать всплывающее/модальное окно, слайдер изображений, средство автоматического обновления нижнего колонтитула и многое другое.

Такие творческие проекты отлично подходят для изучения концепций программирования. Вы можете применять навыки по мере их изучения, что увеличивает полезность навыка. Кроме того, вы можете создавать отличные пользовательские интерфейсы, которые понравятся вам и вашим пользователям. Используйте это руководство, чтобы создать скрытую панель поиска и другие интерактивные функции для вашего сайта.