+

Красивая форма поиска для Ucoz

Красивая форма поиска для Ucoz
Цена: БЕСПЛАТНО
Просмотров: 3450
Добавлено: 25.12.2012
Контакты: Автор (VK) (Онлайн)
Файл добавил: startsmart
Архив шаблона: ОТСУТСТВУЕТ
Демо: НЕТУ
Информация о материале
Всем привет. Вам ведь правда уже надоела стандартная форма поиска для 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;}

  • Далее, в то место, где вы хотели бы видеть эту форму поиска - вставляете следующий код.

    Код
    <form method="get" action="/search/" class="blue">  
    <p class="s"><input name="q" id="search" type="text" value=""></p>  
    </form>
    <script>  
    jQuery(document).ready(function () {  
    $('#search').focusout(function(){  
    $('p.s').addClass("s_fo"); });  
    $('#search').focusin(function(){  
    $('p.s').removeClass("s_fo"); }); });  
    </script>

    Чтобы сменить цветовую схему формы поиска, вам нужно изменить один лишь класс в html коде тега form (по умолчанию там стоит "blue"). Ниже приведены - шесть разных цветовых вариантов.
    • blue - голубой
    • green - зеленый
    • gray - серый
    • pink - розовый
    • orange - оранжевый
    • black - черный
    Однако если не один их этих вам не подходит, вы можете легко написать свой собственный стиль, имея хотя-бы базовые знания в CSS. Также можно изменить ширину формы в раскрытом состоянии, и многое другое.

  • Теги: красивая форма поиска, форма поиска, для uCoz, новая форма поиска для uCoz, вид поиска, вид формы поиска
    Изображения
    Комментарии (0)