Твой PDA
|
Здоров: Гость
СТАЛКЕР,чтобы тебе выдали личный PDA тебе необходимо озвучить нам свои данные,в общем спроси у Сидоровича,он там в левом углу-вот он точно тебе поможет.Удачи в Зоне!
|
|
Наш ассортимент
|
|
|
Что в этом разделе
|
Привет СТАЛКЕР!
смотри,что накопил пока тебя небыло:
|
|
Вопрос на засыпку |
|
|
С тобой на сайте
|
Зарегистрировано на сайте:
Всего: 325 Новых за месяц: 0 Новых за неделю: 0 Новых вчера: 0 Новых сегодня: 0
Из них: Администраторов: 2 Друзей: 0 Проверенных: 1 Обычных юзеров: 321
Сейчас на сайте: 8 Гостей: 8 Те с кем можно общаться в чате: 0 |
|
Лучшые СТАЛКЕРЫ |
Гордость ЗОНЫ
|
|
|
|
| |
| Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
14:24 Создаём раздвижную форму поиска для 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.
Спасибо за внимание!
|
Просмотров: 98 |
Добавил: DoG
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные СТАЛКЕРЫ [ Регистрация | Вход ]
|
|
|
| |
|
Заходи СТАЛКЕР! |
Заходи СТАЛКЕР!
Привет я Сидорович, главный здесь.
Вижу
тебе нетерпиться подключить игрушку и рвануть в ЗОНУ,понимаю сам таким
был.Ну чтож заполняй анкету и двигай,когда будеш в километре от меня
подашь сигнал чтоб я твой PDA подтвердил.Ну вроде все,ах да чуть не
забыл если ты уже раньше заполнял анкету то можеш сказать мне свою
кличку и пароль и я тебя в момент подключу!
|
|
СТАЛКЕРСКАЯ сеть |
|
|
Найдется все |
|
|
Будь в курсе
|
|
|
|