» »

Поиск по сайту с разворачиванием на uCoz

Поиск по сайту с разворачиванием на uCoz

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

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

Так будет визуально по умолчанию:

Выезжающий поиск по сайту

Здесь он уже в рабочем виде:

Красивый поиск по сайту с эффектом для uCoz

Приступаем к установке:

Ставим в то место, где вам нужно видеть его:

Код
<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, что безусловно большой плюс, совершенно не будет грузить. Если вам нужно, чтоб при клике поиск выдвигался больше или меньше, то это все можно настроить в стилях в самом начале.
2017-02-02 Просмотров: 653 Комментарий: (3)

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

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

Комментарий: 3
FeStemBer
FeStemBer 2017-02-02 23:211
0
Такой поиск ставить на фиксированную ширину на сайте, те сайты, которые сильно ужат, то здесь он подойдет как не когда.
Kosten
Kosten 2017-02-02 23:272
0
В стилях можно больше и гире сделать и на широком нормально будет, но в блок его точно не поставить, так возможно, но не очень красиво будет, здесь больше в вверх сайта ставить в саму шапку, то это уже другой уровень.
Tergran
Tergran 2017-02-03 00:003
0
Ставил его на сайт и как раз на темный, жаль стили не сохранились, там много чего добавил, но больше просто перестроил тот который есть.
avatar