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

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

На сегодняшний день все чаще дизайнеры отдают предпочтение стилю Flat, когда речь идет об оформлении страницы. Среди прочих компонентов, которые можно оформить с помощью данного стиля, следует обратить внимание на окно поиска. Чаще всего окно поиска статичное. Однако с применением Flat при установке курсора окно  развернется, после использования — обратно “свернется”.  Иконка поиска, расположенная в SVG-файле, будет адаптироваться под любой экран, будь это монитор с высоким расширением или смартфон.

Ниже представлена ссылка, где показан пример такой выдвигающейся формы поиска для вашего сайта:

Демо Скачать

Как сделать выдвигающееся окно поиска на javascript?

HTML

Итак, для начала необходимо разобраться с разметкой в HTML.

Код выглядит следующим образом:

В данном случае окошко поиска стандартное и представляет собой иконку,  кнопку поиска,  и поле, куда вводится текст.

CSS

Теперь обратимся  к CSS, чтобы красиво оформить нашу форму поиска. Поскольку окно поиска  появляется только по требованию пользователя, необходимо указать, что она скрыта. Для этого в коде имеется свойство overflow, для которого указано значение hidden. Благодаря этому на виду остается только иконка, а все, что за ее границами, скрывается.

Следующий шаг — позиционирование текстового поля:

В окне поиска располагается текст, цвет которого можно изменить в зависимости от общего оформления Вашей страницы.

Поскольку окно поиска располагается над прочими блоками страницы, необходимо скорректировать значение  z-index и сделать его большим:

Наконец, установим иконки из SVG-файла. Вот код,  необходимый в данном случае:

Javascript

Наконец, необходимо подключить несколько скриптов — uisearch.js, classie.js (они есть в архиве) — делается это внизу страницы:

Преимущества подобного оформления формы поиска очевидно — такое окно интересное и  практичное -  экономит место на странице.


Оставить комментарий