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

Выдвигающаяся форма поиска по клику

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

Как сделать выдвигающийся поиск по клику.

В обычном состоянии форма поиска свернута до минимального размера и только иконка указывает на то, что это форма поиска. При клике на иконку, поле ввода формы выдвигается.

Как сделать выдвигающийся поиск по клику.

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.