Доброго времени суток, уважаемый посетитель сайта Webik-Diz! Ты находишься на сайте, на котором сможешь скачать действительно качественные шаблоны. Помимо обычных дизайнов, на сайте есть огромный архив наших авторских рипов, множество красивейших макетов, уникальных версток и адаптаций. Мы стараемся помочь пользователю найти шаблон для сайта, а также помочь в освоении системы uCoz. Оставайтесь со StuDRippo и будьте в курсе всех последних поступлений на сайте!
Главная страница » Архив материалов » Другое » Фиксированная форма поиска ...
Фиксированная форма поиска для uCoz
20.04.2013
Фиксированная форма поиска для uCoz
Скриншот материала «Фиксированная форма поиска для uCoz»
Нажмите, чтобы увеличить
  • Просмотров: 962
  • Скачиваний: 236
  • Комментариев: 0
  • от Nikola
Всем привет, в этой статье мы будем создавать движущуюся форму поиска, многие из вас могли видеть данный пример поиска на сайте Яндекса. Я уверен, что данное решение найдёт своих пользователей, так как оно подойдёт сайтам которые размещают форму поиска над контентом, но для начала смотрим демо.

Шаг 1 - Установим JS:
Для начала нам следует установить основной js скрипт, который будет отвечать за подвижную форму поиска на сайте, для этого вниз страницы перед закрывающим тегом </body> устанавливаем js:

JS
Код
<script type="text/javascript" src="http://center-dm.ru/ucoz/forma_poicka/v3/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;  
}

На этом всё, спасибо за внимание!
Если у Вас всё же остались вопросы, ответы на которые Вы не нашли, воспользуйтесь Обратной связью, либо напишите Администратору или Модератору персональное сообщение с описанием проблемы.
    В комментариях запрещено:
  • Писать сообщение прописными буквами (Caps Lock).
  • Рекламировать какие-либо сайты.
  • Использовать более двух смайлов в одном комментарии.
  • Оскорблять пользователей сайта.
  • Выражаться некультурными словами.
Чат
Цена: 2 руб.
Витрина ссылок
Поставить к себе на сайт
Купить ссылку здесь
Реклама
Люди говорят
Nikola оставил отзыв:
Оставляйте отзывы и пожелания в гостевой книге. Нам важно, что вы думаете!
+0 Все отзывы