» »

Раздвижной стильный поиск для uCoz


Раздвижной стильный поиск для uCoz

Нельзя представить сайт без поиска, и здесь скрипт раздвижной стильный поиск для uCoz. Который будет идти в два формата, но функция будет у него одна. Иногда вы проверяете на мобильное устройство сайт, и поиск по сайту, который вы устанавливали вылазит, что с этим не случиться. Так как по клику он выдвинуться, чтоб вы написали, то что хотите найти на сайте. И здесь безусловно можно сказать, что по своей функциональности, он будет отличное решение для любого интернет ресурса.

И так начнем установку.
Ставим скрипт, там где нужно, но основном это бываем вверх сайта или как по другому сказать шапка.

Код
<form action="/search/" method="get" onsubmit="this.sfSbm.disabled=true">  
<input type="text" size="20" maxlength="80" name="q" placeholder="Поиск" class="search-1">  
</form>


стильный поиск для uCoz

Это стили под первый вариант:

Код
.search-1 {background: url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/171_search-icon.png') no-repeat 12px 12px rgba(0, 0, 0, 0.02); border: solid 1px #ccc; border-radius: 42px; width: 70px; height: 38px; padding-left: 40px; transition: all 0.5s;}  
.search-1:focus {background-color: rgba(255, 255, 255, 0.5); border-color: #6dcff6; width: 200px;}  

.search-2 {background: url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/171_search-icon.png') no-repeat 12px 12px rgba(0, 0, 0, 0.02); border: solid 1px #ccc; border-radius: 42px; width: 0; height: 38px; padding-left: 40px; color: transparent; transition: all 0.5s; cursor: pointer;}  
.search-2:hover {background-color: rgba(255, 255, 255, 0.5);}  
.search-2:focus {background-color: rgba(255, 255, 255, 0.5); border-color: #6dcff6; width: 200px; color: #000; cursor: auto;}


Но теперь остался второй вариант, где просто будет кнопка с лупой, при клике появиться весь поиск, что вы можете поставить и много что первый и особенно второй, места не займет.

Красивый поиск для uCoz

№2

Код
.search-1 {background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/171_search-icon.png') no-repeat 12px 12px rgba(0, 0, 0, 0.02); border: solid 1px #ccc; border-radius: 42px; width: 70px; height: 38px; padding-left: 40px; transition: all 0.5s;}  
.search-1:focus {background-color: rgba(255, 255, 255, 0.5); border-color: #6dcff6; width: 200px;}  

.search-1 {background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/171_search-icon.png') no-repeat 12px 12px rgba(0, 0, 0, 0.02); border: solid 1px #ccc; border-radius: 42px; width: 0; height: 38px; padding-left: 40px; color: transparent; transition: all 0.5s; cursor: pointer;}  
.search-1:hover {background-color: rgba(255, 255, 255, 0.5);}  
.search-1:focus {background-color: rgba(255, 255, 255, 0.5); border-color: #6dcff6; width: 200px; color: #000; cursor: auto;}


Источник: http://divvvy.ru/
19.04.2016 Просмотров: 417 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Maryges
Maryges 19.04.2016 21:321
0
Самый нормальный и компактный поиск, который по своим габаритам, только на вверх сайта и ставить, в блок как то не то уже будет.
Tergran
Tergran 19.04.2016 21:402
0
Ставил недавно скрипт такой, по такой же форме работает, но здесь на пару минут установил.
workman
workman 19.04.2016 22:003
0
Зашибиська ...
Kosten
Kosten 19.04.2016 22:184
0
Какого лешего ты тут аппаратурой разбрасываешься, хотя если в гневе) то можешь пыль стряхнуть.
csretven
csretven 20.04.2016 19:265
0
Второй вариант больше нравится, но для меня лучше полный поиск, хотя не исключаю, что такой поставлю.
avatar