Поиск по сайту с эффектом на сайт - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Это простой и рабочий поиск по сайту с закругленными углами, где присутствует синее кнопка под клик и безусловно красивый эффект поиска. Как видим по дизайн он не чем почти не отличается от других, но здесь стоит синее кнопка, что он такой закругленный по углам. Он настроен по умолчанию искать в каталоге файлов, если у вас другой модуль, то просто в самом коде поменяйте.

Здесь он идет под div, что в стилях к нему как раз будет также первая строчка. Это чтоб его переместить в правую сторону. И здесь посчитал нужно оставить, возможно при установки пригодиться. Если нет, то просто можете убрать.

На тестовом сайте проверил и все работает.

И желательно ставить на темный фон, по оттенку вы сами можете изменить как нужно.
 
Переходим к установке:


Ставим там где вам нужно видеть его:
Код
<?if($SEARCH_FORM$)?>  
<div class="t_search">  
<form onsubmit="this.sfSbm.disabled=true" method="post" action="/load/">  
<input class="t_search_sub" type="submit" name="sfSbm" value="Поиск">  
<input class="t_search_text" type="text" name="query" placeholder="Найти на сайте...">  
<input type="hidden" name="a" value="2">  
</form>  
</div>  
<?endif?>


В CSS:
Код
.t_search {float:right;height:74px;width:400px;position:relative}  
.t_search_text {position:absolute;right:0px;top:21px;width:220px !important;padding:0px 20px !important;padding-right:44px !important;height:31px;background:#252c39 !important;color:#FFF;border:0px !important;-webkit-border-radius: 20px !important;-moz-border-radius: 20px !important;border-radius: 20px !important;}  
.t_search_text:focus {background:#FFF !important;color:#1d1d1d !important}  
.t_search_sub {position:absolute;right:3px;cursor:pointer;top:24px;z-index:2;width:25px;height:25px;overflow:hidden;background:url('http://zornet.ru/Aben/Gsa/zornet/t_search.png') no-repeat !important;border:0px !important;color:rgba(255,255,255,0) !important;font-size:0px}  
.t_search_sub:hover {opacity:0.8}


Здесь настраиваем полностью дизайн его, как по гамме, так и по его ширине.

Важно!

При копировании материала указывать ссылку на источник.

- 275
- 22-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта