» »

Красивое горизонтальное меню VergaUnta для uCoz


Красивое горизонтальное меню VergaUnta для uCoz

Думаю вы стали замечать на ресурсах появляется навигация по ширине большой, и вот вам Красивое горизонтальное меню VergaUnta для uCoz которое со своей стороны стильное и популярное в своих размерах. Оно светлое, что можно установить его как вверху так и под шапкой и реально смотреться будет оригинально. Но это не все, при наведение у него синий оттенок а также имеются под категорий или разделы, которые выполнены в темной гамме. И что замечательно на них также распространяется эффект нажатие на надпись. Углов у него нет, что можно устанавливать на многие каркасы, так как основном они идут в таком же стиле. Есть разделительная полоса, где вы можете писать, здесь можно в мелком шрифте отписать а будет все в большом. Ставиться как на фиксированную ширину, так и на резиновые ресурсы, больше всего подойдет на серый фон.

Код:

Код
<div id="hornav">
<div class="inside">
<ul class="menu"><li><a href="http://zornet.ru/"><span>Главная</span></a></li>
<li class="parent"><a><span>Скрипты для uCoz</span></a>
<ul>
<li><a href="/"><span>САЙТ ZORNET.RU</span></a></li>
<li><a href="/"><span>САЙТ ZORNET.RU</span></a></li>
<li><a href="/"><span>САЙТ ZORNET.RU</span></a></li>
</ul>
</li>
<li class="parent"><a><span>ZORNET.RU</span></a><ul>
<li><a href="/"><span>ШАБЛОНЫ ДЛЯ UCOZ</span></a></li>
<li><a href="/"><span>ШАБЛОНЫ ДЛЯ UCOZ</span></a></li>
<li><a href="/"><span>ШАБЛОНЫ ДЛЯ UCOZ</span></a></li>
</ul>
</li>
<li><a href="http://zornet.ru/load/66"><span>ДИЗАЙН САЙТА</span></a></li>
<li><a href="/zornet.ru/load/avatarki_psd/114"><span>Аватарки PSD</span></a></li>
<li><a href="http://zornet.ru/load/ajax_dlja_ucoz/85"><span>Ajax для uCoz</span></a></li></ul>
</div>  
</div>


CSS:

Код
#hornav .inside{padding:0 16px}
#hornav{width:100%;height:62px;float:left;background:url(http://zornet.ru/CSS-ZORNET/ND/ZRET/nav-bg00.gif) repeat-x;margin:0;overflow:hidden;-moz-border-radius:6px;-webkit-border-radius:6px}
#hornav ul{list-style-type:none;text-align:left;float:left;margin:0;padding:0}
#hornav ul li{float:left;border:none;height:62px;line-height:62px;margin:0;padding:0;background:none}
#hornav ul li a{text-transform:uppercase;text-decoration:none;color:#2C3034;margin-right:1px;padding:0 15px;font-size-adjust:none;font-stretch:normal;font:normal normal bold 13px/62px arial,helvetica,sans serif;text-transform:uppercase;display:block;border-right:1px solid #ccc}
#hornav ul li.active a{background:url(http://zornet.ru/CSS-ZORNET/ND/ZRET/active-n.gif) repeat-x;color:#fff;text-shadow:0 1px #777}
#hornav ul li a:hover{background:url(http://zornet.ru/CSS-ZORNET/ND/ZRET/active-n.gif) repeat-x;color:#fff;text-shadow:0 1px #777}

#hornav ul ul{position:absolute;width:180px;left:-999em;z-index:99;margin:0}
#hornav ul ul li{float:left;border:none;height:30px;line-height:30px;width:180px;margin:0;padding:0}
#hornav ul ul li a,#hornav ul ul li a:visited,#hornav ul ul li a:active,#hornav ul ul li a:link{margin:0;height:30px;background:#2f2f30;color:#f5f5f5;line-height:30px;font-size:10px;font-weight:bold;text-transform:uppercase;margin:0;border:1px solid #454546;border-bottom:1px solid #1e1e1f;text-shadow:none}
#hornav ul ul li a:hover{background:#111;color:#f5f5f5;text-shadow:none}
#hornav ul ul li.active a{background:#111;color:#f5f5f5;text-shadow:none}

/*Level 3*/
#hornav ul ul ul{margin:-30px 0 0 180px;z-index:99}
#hornav ul ul ul li{float:left;width:180px;border:none;height:30px;line-height:30px;margin:0;padding:0}
#hornav ul ul ul li a,#hornav ul ul ul li a:visited,#hornav ul ul ul li a:active,#hornav ul ul ul li a:link{background:#2f2f30;color:#f5f5f5}
#hornav ul ul ul li a:hover{background:#111;color:#f5f5f5}
#hornav ul ul ul li.active a{background:#111;color:#f5f5f5}
/*Level 4*/
#hornav ul ul ul ul li a,#hornav ul ul ul ul li a:visited,#hornav ul ul ul ul li a:active,#hornav ul ul ul ul li a:link{background:#2f2f30;color:#f5f5f5}
#hornav ul ul ul ul li a:hover{background:#111;color:#f5f5f5}
#hornav ul ul ul ul li.active a{background:#111;color:#f5f5f5}

/*Level 5*/
#hornav ul ul ul ul ul li a,#hornav ul ul ul ul ul li a:visited,#hornav ul ul ul ul ul li a:active,#hornav ul ul ul ul ul li a:link{background:#2f2f30;color:#f5f5f5}
#hornav ul ul ul ul ul li a:hover{background:#111;color:#f5f5f5}
#hornav ul ul ul ul ul li.active a{background:#111;color:#f5f5f5}
#hornav li:hover ul ul,#hornav li:hover ul ul ul,#hornav li:hover ul ul ul ul,#hornav li:hover ul ul ul ul ul,#hornav li:hover ul ul ul ul ul ul,#hornav li.sfhover ul ul,#hornav li.sfhover ul ul ul,#hornav li.sfhover ul ul ul ul,#hornav li.sfhover ul ul ul ul ul,#hornav li.sfhover ul ul ul ul ul ul{left:-999em}
#hornav li:hover ul,#hornav li li:hover ul,#hornav li li li:hover ul,#hornav li li li li:hover ul,#hornav li li li li li:hover ul,#hornav li li li li li li:hover ul,#hornav li.sfhover ul,#hornav li li.sfhover ul,#hornav li li li.sfhover ul,#hornav li li li li.sfhover ul,#hornav li li li li li.sfhover ul,#hornav li li li li li li.sfhover ul{left:auto}


Стили под номером 3, 4, 5 идут на раскрытие, если вам не нужны они, то можете убрать и получится простая навигация. Но это вам решать, заливаю как есть, сам скрипт очень понятен, и можете посмотреть DEMO на материал, как работает.

11.06.2015 Просмотров: 522 Комментарий: (9)

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

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

Комментарий: 9
workman
workman 12.06.2015 10:171
0
круто.... спасибо... забираю... friends
kredit-oformi
kredit-oformi 12.06.2015 10:312
0
workman, никак проект какой то мудриш?
workman
workman 12.06.2015 10:413
0
kredit-oformi, что-то вроде того. Своего рода ЧС "прославленных" Хероев Укропии, которые давали приказ бить по мирным жителям на Донбассе. Как-то так
kredit-oformi
kredit-oformi 12.06.2015 10:504
0
workman, когда будет готов кидай ссыль wink
workman
workman 12.06.2015 11:095
0
хорошо
Kosten
Kosten 13.06.2015 21:206
0
workman, не забывал за меня.
workman
workman 13.06.2015 23:327
0
Kosten, Разведка своих не бросает!!!! friends
Kosten
Kosten 14.06.2015 21:208
0
workman, это закон не писаный а также выше нас только звезды. ninja
Kosten
Kosten 05.10.2015 07:069
0
Не дурно можно со стилями поиграться и сделать под категорий прозрачными. Они как раз оказались в темной гамме и вот как получилось на цветном фоне.

avatar