Информация о материале
Выглядит это следующим образом: пользователь видит только часть текстового поля, ту часть, в которой есть иконка поиска, по нажатию на эту иконку выползает оставшаяся часть поиска. Так только, кажется, на самом деле поиск не выползает и не выдвигается, он просто увеличивается по ширине. Стандартную ширину ставим 1 пиксель, видимую область решит padding слева. Кстати, padding справа уберем вообще, чтобы все выглядело ровно. Выдвижной поиск на JQuery смотрится лучше, когда располагается справа, так и задумано. Если установить слева, то выдвигаться поиск будет в правую сторону, эффект не такой интересный, но, возможно, вам это и нужно.
Для примера сконструировано меню, сюда же и «впихнем» наш поиск. Меню сделано с помощью списков (UL и LI), поэтому заключенный в LI поиск приобретает атрибут в CSS (float: right). Это значит, что поиск будет показываться справа независимо от других элементов.
Для примера сконструировано меню, сюда же и «впихнем» наш поиск. Меню сделано с помощью списков (UL и LI), поэтому заключенный в LI поиск приобретает атрибут в CSS (float: right). Это значит, что поиск будет показываться справа независимо от других элементов.
Подключение JQuery (между HEAD)
<script type="text/javascript" src="http://s67.ucoz.net/src/jquery-1.7.2.js"></script>
Для юкоз-сайтов подключать jquery-библиотеку не нужно, т.к на них она есть по-умолчанию.
Код CSS
textarea:focus, input:focus, select:focus {outline:none}
.searchinput {background:#FFF url('http://fullweb.ucoz.ru/_bl/5/17839315.png') 7px no-repeat; margin:0; padding: 7px 0px 7px 30px !important; color:#151515; width:1px; float: right; border: 0px none !important; }
.mn {margin:0; padding:0; height:30px; line-height:30px; background:#FFF; border:1px solid #dedede; border-left: 0;}
.mn li {list-style-type:none; float:left; border-left:1px solid #dedede;}
.mn li.search {float:right;}
.mn li a, .mn li a:hover {padding:8px 10px 8px 10px; color:#585858; text-decoration:none;}
.mn li a:hover {color:#000;}
Код HTML (между BODY)
<ul class="mn">
<li class="search">
<!--Только поиск-->
<form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">
<input onfocus="$(this).animate({style:'width:186px; background-color:#F8F8F8;'},200)"onblur="if($(this).val()=='') {$(this).animate({style:'width:1px; background-color:#FFF;'},200)}" class="searchinput" name="q" type="text" value=""maxlength="40"/>
</form>
<!--/Только поиск-->
</li>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Реклама</a></li>
</ul>
Автор: 
Категория: 
Просмотров: 447
"ЕСЛИ ВЫ НАШЛИ ТОТ МОТЕРИАЛ КОТОРЫЙ ВЫ ИСКАЛИ-ТО НАЖМИТЕ КНОПКАМ С ЛЕВОЙ СТРОНЫ"
Загрузок:
Комментариев: 0
