ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивое горизонтальное меню 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 на материал, как работает.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
workman, когда будет готов кидай ссыль
 | |
| 1 2 » | |
