Регистрация    Войти
Авторизация

Движущаяся форма поиска для uCoz

Движущаяся форма поиска для uCozДвижущаяся форма поиска для uCoz

Движущаяся форма поиска для uCoz. Всем привет, в этой статье мы будем создавать движущуюся форму поиска, многие из вас могли видеть данный пример поиска на сайте Яндекса. Я уверен, что данное решение найдёт своих пользователей, так как оно подойдёт сайтам которые размещают форму поиска над контентом.

Шаг 1 - Установим JS:

Для начала нам следует установить основной js скрипт, который будет отвечать за подвижную форму писка на сайте, для этого вниз страницы перед закрывающим тегом устанавливаем js:

 <script type="text/javascript" src="http://center-dm.ru/ucoz/forma_poicka/v3/u_poisk.js"></script>


Шаг 2 - Установим 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 стили:

/* Движущаяся форма поиска для 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;
}


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  17-01-2013, 20:35   Просмотров: 4415   

Источник новости: сеntеr-dm.ru

форма поиска для uCoz, Поиск для uCoz, Движущаяся форма поиска, форма поиска
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.