Выдвижной поиск на JQuery
Выглядит это следующим образом: пользователь видит только часть текстового поля, ту часть, в которой есть иконка поиска, по нажатию на эту иконку выползает оставшаяся часть поиска. Так только, кажется, на самом деле поиск не выползает и не выдвигается, он просто увеличивается по ширине. Стандартную ширину ставим 1 пиксель, видимую область решит padding слева. Кстати, padding справа уберем вообще, чтобы все выглядело ровно. Выдвижной поиск на JQuery смотрится лучше, когда располагается справа, так и задумано. Если установить слева, то выдвигаться поиск будет в правую сторону, эффект не такой интересный, но, возможно, вам это и нужно.
Для примера сконструировано меню, сюда же и «впихнем» наш поиск. Меню сделано с помощью списков (UL и LI), поэтому заключенный в LI поиск приобретает атрибут в CSS (float: right). Это значит, что поиск будет показываться справа независимо от других элементов.
Пример
Подключение JQuery (между HEAD)
Код CSS
Код HTML (между BODY)
Для примера сконструировано меню, сюда же и «впихнем» наш поиск. Меню сделано с помощью списков (UL и LI), поэтому заключенный в LI поиск приобретает атрибут в CSS (float: right). Это значит, что поиск будет показываться справа независимо от других элементов.
Пример
Подключение JQuery (между HEAD)
Code
<script type="text/javascript" src="http://yraaa.ru/test/53/jquery.js"></script>
Код CSS
Code
<style type="text/css">
textarea:focus, input:focus, select:focus {outline:none} /*Убираем выделение в Chrome и Safari*/
.searchinput {background:#FFFFFF url('http://yraaa.ru/_pu/13/84919601.png') 7px 6px no-repeat;margin:0;padding:6px;padding-right:0;padding-left:28px;color:#151515;width:1px;border:1px solid #FFFFFF} /* CSS для INPUT */
/*Следующие строчки для самого меню*/
.mn {margin:0;padding:0;height:30px;line-height:30px;background:#FFFFFF;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}
</style>
textarea:focus, input:focus, select:focus {outline:none} /*Убираем выделение в Chrome и Safari*/
.searchinput {background:#FFFFFF url('http://yraaa.ru/_pu/13/84919601.png') 7px 6px no-repeat;margin:0;padding:6px;padding-right:0;padding-left:28px;color:#151515;width:1px;border:1px solid #FFFFFF} /* CSS для INPUT */
/*Следующие строчки для самого меню*/
.mn {margin:0;padding:0;height:30px;line-height:30px;background:#FFFFFF;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}
</style>
Код HTML (между BODY)
Code
<ul class="mn">
<li class="search">
<!--Только поиск-->
<input onfocus="$(this).animate({width:'186px'},200)" onblur="if($(this).val()=='') {$(this).animate({width:'1px'},200)}" class="searchinput" name="s" type="text" value="" maxlength="40" />
<!--/Только поиск, только хардкор-->
</li>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Реклама</a></li>
</ul>
<li class="search">
<!--Только поиск-->
<input onfocus="$(this).animate({width:'186px'},200)" onblur="if($(this).val()=='') {$(this).animate({width:'1px'},200)}" class="searchinput" name="s" type="text" value="" maxlength="40" />
<!--/Только поиск, только хардкор-->
</li>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">О сайте</a></li>
<li><a href="#">Реклама</a></li>
</ul>
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (8)
0
0
0
0
0
0
0
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
