Висувається форма пошуку

HTML

Спершу визначимося з розміткою, яка буде на HTML сторінці:

lt;div id="Sb-search" class="Sb-search"gt;lt;formgt;lt;input class="Sb-search-input" placeholder="Що буде шукати?" type="Text" value="" name="Search" id="Search"gt;lt;input class="Sb-search-submit" type="Submit" value=""gt;lt;span class="Sb-icon-search"gt; lt;/spangt;lt;/formgt;lt;/divgt;

У формі пошуку нічого незвичайного немає: текстове поле для введення, кнопка пошуку та елемент для іконки.

CSS

Тепер додамо стилів, щоб форма пошуку красиво виглядала на сторінці.

Так як форма пошуку буде з`являтися при кліці, то спочатку вона прихована. Це робиться за допомогою властивості overflow і його значенням hidden, внаслідок чого ховається все що знаходиться за межами іконки (в результаті ми бачимо тільки іконку, а текстове поле немає):

123456789101112131415

.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-}

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

123456789101112131415161718192021

.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-}

Відео: 11.Созданіе Форму пошуку

Визначаємо колір тексту, який знаходиться на тлі запиту (тексту, який ми вводимо при пошуку):

123456789101112131415

.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:

1234567891011121314151617

.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). Для того щоб вставити іконку в кнопці пошуку:

12345678910

@ 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) і підключаємо їх в кінці сторінки:

lt;script src="Js / classie.js"gt; lt;/scriptgt;lt;script src="Js / uisearch.js"gt; lt;/scriptgt;lt;scriptgt; new UISearch (document.getElementById ( `sb-search`)) -lt;/scriptgt;