Поиск по сайту с разворачиванием на uCoz
 | |
| Удобный поиск по сайту, который будет заметен и по клику он будет разворачиваться в длину, где есть кнопка, но работает через Enter. Изначально гамма цвета идет у него темно красная, это на светлом сайте что сразу можно увидеть его, потому он в ярком оттенке. Но когда он встает в рабочее положение, то гамма меняется на светло синее и плюс небольшая тень идет. Все это сделано на стилях CSS что с ним будет при установке. И здесь вы можете поменять как оттенок, если решите установить на темный интернет ресурс, все отлично и понятно в стилях прописано. Идет одна ссылка, на изображение лупы, оставил ее, хотя можно заменить на что то красивее, но здесь кому как нравится. Устанавливая на тестовый сайт, здесь безусловно проверил на работоспособность и все отлично работает. В нем по умолчанию стоит search, что поиск будет производиться по всему сайту. В самом коде также поставлены значение где можно увеличить знаки, которые прописывать будете и искать по ним. Так будет визуально по умолчанию:  Здесь он уже в рабочем виде:  Приступаем к установке: Ставим в то место, где вам нужно видеть его: Код <div class="search_block"> <form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"> <input type="text" name="q" required placeholder="Поиск..." maxlength="70" size="20" /> <input type="submit" name="sfSbm" value="" /> </form> </div> CSS: Код .search_block *{margin:0;padding:0;} .search_block{position:relative;width:263px;display: inline-block;} .search_block input[type="text"]{-moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;border-radius: 3px;padding: 6px 6px;display:inline-block;width: 110px;height:16px;outline:0;float:right;border: 1px solid #9e624d;} .search_block input[type="text"]:focus{width: 220px;box-shadow:0 0 6px #07a4d1 ;border:1px solid #1cacd6;} .search_block input[type="submit"]{border-radius:3px;outline:none;right: 6px;top:5px;float:right;position:absolute;width:20px;height:20px;border:0;background: url('http://zornet.ru/CSS-ZORNET/Abvan/30a33580b62b4b35b9d84a30ef5c2dfb.png') center center no-repeat;} Здесь нужно заметить, что этот материал работает без javascript, что безусловно большой плюс, совершенно не будет грузить. Если вам нужно, чтоб при клике поиск выдвигался больше или меньше, то это все можно настроить в стилях в самом начале. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
