Всем привет, в этой статье мы будем создавать движущуюся форму поиска, многие из вас могли видеть данный пример поиска на сайте Яндекса. Я уверен, что данное решение найдёт своих пользователей, так как оно подойдёт сайтам которые размещают форму поиска над контентом, но для начала смотрим демо.
Шаг 1 - Установим JS:
Для начала нам следует установить основной js скрипт, который будет отвечать за подвижную форму поиска на сайте, для этого вниз страницы перед закрывающим тегом </body> устанавливаем js:
JS
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/form-poisk-pod/u_poisk.js"></script>
Шаг 2 - Установим HTML:
Теперь на страницу сайта следует поместить html каркас с формой поиска:
HTML
<div class="poick_os p_top">
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
<input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>
<input class="poick_knopka" type="submit" value="Найти" />
<input type="hidden" name="t" value="0" />
</form>
</div>
Шаг 3 - Установим CSS:
Теперь пропишем следующие css стили:
CSS-Code
/* Движущаяся форма поиска для uCoz
------------------------------------------*/
.poick_os,
.content_os {
width: 440px;
margin: 0 auto;
padding: 15px 30px 15px 30px;
}
.p_bottom {
top: 0;
position:fixed;
}
.poick_os {
float:left;
background:#F3F3F3;
border-bottom: 1px solid #CAD1DB;
}
.poick_os input {
float:left;
margin:0px;
vertical-align:middle;
font:11px Verdana,Arial,Helvetica,sans-serif;
}
.poick_pole {
color:#555;
width:349px;
height:15px;
padding:5px 10px;
border: 1px solid #CAD1DB!important;
border-right:none!important;
}
.poick_pole:focus {
box-shadow:inset 0px 0px 3px #ccc!important;
-webkit-box-shadow:inset 0px 0px 3px #ccc!important;
-moz-box-shadow:inset 0px 0px 3px #ccc!important;
}
.poick_knopka {
width:70px;
height:27px;
cursor:pointer;
border:1px solid #d6982f!important;
color:#73450d!important; text-shadow:1px 1px 1px #fff7e5!important;
background: #febf4e!important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fed76e), color-stop(1, #ffbd4b))!important;
background: -moz-linear-gradient(top, #fed76e 1%, #ffbd4b 100%)!important;
background: -o-linear-gradient(#fed76e, #ffbd4b)!important;
}
.poick_knopka:active {
box-shadow:inset 0px 0px 3px #bb8323!important;
-webkit-box-shadow:inset 0px 0px 3px #bb8323!important;
-moz-box-shadow:inset 0px 0px 3px #bb8323!important;
}
.poick_knopka:hover {
background:#fedc77!important;
}
На этом всё, спасибо за внимание!
· 
11:39
