Раздвижной стильный поиск для 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>  Это стили под первый вариант: Код .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;} Но теперь остался второй вариант, где просто будет кнопка с лупой, при клике появиться весь поиск, что вы можете поставить и много что первый и особенно второй, места не займет.  №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/ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
