6 405 На сегодняшний день все чаще дизайнеры отдают предпочтение стилю Flat, когда речь идет об оформлении страницы. Среди прочих компонентов, которые можно оформить с помощью данного стиля, следует обратить внимание на окно поиска. Чаще всего окно поиска статичное. Однако с применением Flat при установке курсора окно развернется, после использования — обратно “свернется”. Иконка поиска, расположенная в SVG-файле, будет адаптироваться под любой экран, будь это монитор с высоким расширением или смартфон.
Ниже представлена ссылка, где показан пример такой выдвигающейся формы поиска для вашего сайта:
Как сделать выдвигающееся окно поиска на javascript?
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> |
В данном случае окошко поиска стандартное и представляет собой иконку, кнопку поиска, и поле, куда вводится текст.
CSS
Теперь обратимся к 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; } |
Поскольку окно поиска располагается над прочими блоками страницы, необходимо скорректировать значение 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> |
Преимущества подобного оформления формы поиска очевидно — такое окно интересное и практичное - экономит место на странице.
