» »

Навигация и поиск на JQuery для uCoz


Навигация и поиск на JQuery для uCoz

Это небольшая функция с навигацией и плюс выдвижной поиск идет с ним. Больше подойдет на блог или сайт с фиксированной шириной. По умолчанию сама кнопка будет находится с правой стороны, только стоит сделать клик по ней, так как он развернется. По левую сторону стоит у нас разделы, где можно прописать главные разделы или что вам нужно. Что по поиску можно добавить, что его можно и влево переместить, все зависит от (float: right) что поменять в CSSчто идут с материалом.

Но думаю многие согласятся со мной, что с правой как то привычнее и в стилях прописан он так как показано на изображение. Безусловно его ставить на аналогичную гамму цвета ресурса, на темном не очень будет визуально смотреться. Также как хотите, можете установить в самый вверх над шапкой или наоборот под нее, здесь все зависит от самого дизайн портала.

Установка:

Для начало нужно JQuery (между HEAD) что по вверх стоят на страницах.

Код
<script type="text/javascript" src="http://s67.ucoz.net/src/jquery-1.7.2.js"></script>


Теперь переходим, а точнее заходим CSS и прописываем там стили.

Код
textarea:focus, input:focus, select:focus {outline:none}  
.searchinput {background:#FFF url('http://zornet.ru/Ajaxoskrip/Abaveg/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="http://zornet.ru/">Главная</a></li>  
<li><a href="#">Новости</a></li>  
<li><a href="#">О сайте</a></li>  
<li><a href="#">Реклама</a></li>  
</ul>


PS - в корень сайта не нужно не чего загружать.
02.10.2016 Просмотров: 392 Комментарий: (3)

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

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

Комментарий: 3
FeStemBer
FeStemBer 02.10.2016 23:381
0
Мне напоминает одно меню, что также по размером не большое и в свое время можно много где его на сайте увидеть, но здесь еще поиск, что не просто навигация.
Kosten
Kosten 05.10.2016 19:283
0
Это горизонтальное меню с поиском в котором стоит красивый эффект.
tsakonter
tsakonter 02.10.2016 23:402
0
Нормально, то иногда ищешь что то вроде такого скрипта и не найти. А что по горизонтальному меню, то оно и сейчас стоит у многих, старое, но зато красиво сделано.
avatar