Как сделать форму поиска

Как сделать форму поиска
Как сделать форму поиска

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

Стиль Flat обрел немалую популярность при дизайне сайтов. И в этом уроке мы рассмотрим еще один элемент сайта, который сделан в этом стиле. Это элемент — форма поиска. Но не простая форма поиска, а форма поиска которая появляется при нажатии и «сворачивается» если ее не используют. Что касается иконки поиска, то она берется из SVG-файла и является масштабируемой при различных разрешениях экрана(как на мобильных устройствах, так и на больших мониторах).

Пример можно увидеть здесь:

Как использовать?

HTML

Сперва определимся с разметкой, которая будет на HTML странице:

1 2 3 4 5 6 7 <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Что будет искать?" type="text" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"></span> </form> </div>

В форме поиска ничего необычного нет: текстовое поле для ввода, кнопка поиска и элемент <span> для иконки.

CSS

Теперь добавим стилей, чтобы форма поиска красиво смотрелась на странице.

Так как форма поиска будет появляться при клике, то изначально она скрыта. Это делается с помощью свойства overflow и его значением hidden, в результате чего скрывается всё что находится за пределами иконки(в итоге мы видим только иконку, а текстовое поле нет):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 60px; height: 60px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; }

Далее позиционируем текстовое поле для ввода:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .sb-search-input { position: absolute; top: 0; right: 0; border: none; outline: none; background: #fff; width: 100%; height: 60px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; }

Определяем цвет текста, который находится на фоне запроса(текста, который мы вводим при поиске):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .sb-search-input::-webkit-input-placeholder { color: #efb480; } .sb-search-input:-moz-placeholder { color: #efb480; } .sb-search-input::-moz-placeholder { color: #efb480; } .sb-search-input:-ms-input-placeholder { color: #efb480; } Цвет placeholder

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .sb-icon-search { color: #fff; background: #e67e22; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: "\e000"; }

Также не забываем подключить специальные иконки(SVG). Для того чтобы вставить иконку в кнопке поиска:

1 2 3 4 5 6 7 8 9 10 @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; }

Javascript

Скачиваем скрипты(uisearch.js, classie.js) и подключаем их в конце страницы:

1 2 3 4 5 <script src="js/classie.js"></script> <script src="js/uisearch.js"></script> <script> new UISearch( document.getElementById( 'sb-search' ) ); </script>

Вывод

Симпатичная форма поиска, которая занимает очень мало места на сайте и красиво появляется при нажатии на иконку с поиском.

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

Выдвигающаяся форма поиска на сайт 4.67/5 (93.33%) 6 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+



Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска

Как сделать форму поиска