Главная » Скрипты для uCoz » Навигация
Делаем красивую форму поиска для сайта на uCoz
04.11.2010, 12:56 | |
Добавлено - 04.11.2010, 12:56 Добавил - U-cheniy Категория - Навигация Просмотров: 4390 Комментариев - 2 Рейтинг: 0.0/0 Обсудить этот скрипт на форуме Как сделать такую форму поиска на сайте: 1. Данная форма поиска расчитана для рисованной шапки сайта. Т.е Вам нужно на шапке нарисовать собственно форму, а далее установить этот скрипт. Потом подогнать одно к другому. 2. Как устанавливать код: а) Скопировать 1 код в CSS б) Второй код в шапку сайта (ну или куда ещё возможно...)
Код1 #poisk { background:url(images/01.gif) no-repeat; width:293px; /* ширина */ height:60px; /* Высота */ padding-top:17px; /* смещаем всё что внутри в низ, чтобы было ровно */ } #forma { background:none; /* убираем белый фон */ font-size:18px; /* размер шрифта */ font-family:Verdana; /* Шрифт */ color:#000000; /* цвет шрифта */ margin-left:20px; /* смещаем в право слово search */ border:none; /* убираем обводку */ } .knp { background:url(images/1.png) no-repeat; width:60px; height:60px; border:none; /* убираем обводку */ position:absolute; /* для того чтобы можно было сместить вверх */ top:-16px; /* Смещаем вверх кнопку с лупой */ } .knp:hover { background:url(images/1.png) 0px -60px no-repeat; cursor:pointer; /* курсор в виде руки */ } 2)Сам поиск Код2 <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" id="poisk"> <div style="position:relative;"> <input type="text" name="query" id="forma" value="Найти..." onfocus="if(this.value=='Найти...')this.value=''" onblur="if(this.value=='')this.value='Найти...'"/> <input class="knp" name="sfSbm" type="submit" value="" /> <input name="a" value="14" type="hidden"> </div> </form> 3. К скрипту прилогаю PSD исходник собственно созданного поля, который я использовал при создании одного сайта! Проверенно в (Opere, Chrome, Firefox, IE8) Теперь мы имеем симпотичный поиск, который можно изменить под ваш дизайн. Конечно я как сапожник без сапог, поэтому в пример поиска не берём этот сайт, так как тут он не крособраузерен, а сделать нормальный ещё долго руки не дойдут. Кстате здесь показан поиск для модуля "новости". При копировании материала, прямая активная ссылка на сайт uvda.ucoz.ua обязательна! | |
Что-то похожее
Всего комментариев: 1 | ||
| ||