Выдвигающаяся форма поиска по клику
При адаптации сайта под самые маленькие разрешения устройств, хорошо иметь под рукой надежное решение, как размеры формы поиска свести к минимуму. Такое решение есть - это выдвигающаяся форма поиска при клике на иконку.
В обычном состоянии форма поиска свернута до минимального размера и только иконка указывает на то, что это форма поиска. При клике на иконку, поле ввода формы выдвигается.
HTML-код
В HTML разметке прописывается контейнер wrap с одним полем ввода input для текста и шрифтовой иконкой, код которой скопирован с Font Awesome. На официальном сайте Font Awesome, вы без труда найдете нужную иконку.
<body>
<div class="wrap">
<input type="text" class="input" placeholder="Поиск">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</body>
Между тегами head подключаем ссылку на файл иконочного шрифта и переходим к написанию стилей, чтобы форма смотрелась более привлекательно.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
CSS-код
За счет нулевой ширины, поле ввода формы скрыто, мы видим только часть контейнера со скругленными углами - border-radius и с тенью box-shadow.
.wrap{
width: 0px;
border-radius: 7px;
box-shadow: 0 0 9px rgba(0,0,0,0.6);
}
В поле ввода input убираем рамки - border и дефолтный белый цвет через прозрачный фон - transparent. В нераскрытом состоянии форма спрятана - width: 0%.
.input{
border: 0;
background: transparent;
width: 0%;
}
Задаем белый цвет - color и размеры иконки - 22 пикселя через свойство font-size.
.wrap .fas{
color: #fff;
font-size: 22px;
}
Позиционируем иконку относительно родителя - wrap.
position: absolute;
right: 17px;
top: 15px;
В активном состоянии контейнер раскрывается на ширину в 250 пикселей и благодаря transition делает это плавно.
.wrap.active{
width: 240px;
padding-left: 18px;
transition: all 0.6s ease;
}
Поле ввода в активном состоянии раскрывается на 98% по ширине относительно своего родителя.
.input.active{
width: 98%;
padding-left: 6px;
transition: all 0.4s 0.7s ease;
}
Атрибут placeholder выводит текст белого цвета "Поиск" в текстовом поле формы, который исчезает, как только пользователь вводит свое поисковое слово.
input::placeholder {
color: #fff;
}
Итак, какой механизм будет выдвигать форму поиска при клике?
Метод toggleClass
Подключаем библиотеку jQuery перед закрывающим тегом body:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
Создаем JavaScript файл и так же подключаем внизу HTML-файла:
<script src="lib.js"></script>
Функция будет выполняться, как только DOM загрузится.
$(document).ready(function(){
Область для клика - это иконка с классом fa-search.
$(".fa-search").click(function(){
Метод toggleClass работает как переключатель между классами оформления при клике. Если нет класса "active", то он его добавит и тогда форма поиска выдвинется. Если есть класс "active" - удалит и поисковая форма свернётся обратно.
$(".wrap, .input").toggleClass("active");
Событие focus отслеживает текстовое поле input.
$("input[type='text']").focus();
Посмотреть как выдвигается форма поиска и код целиком.
See the Pen Expanding Search Box On Click by porsake (@porsake) on CodePen.
-
Создано 25.06.2018 10:32:36
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.