» »

Стильное горизонтальное меню в 2 оттенках для uCoz


Очень красиво выполнено по оригинальному дизайну Стильное горизонтальное меню в 2 оттенках для uCoz которое как обычно будет идти в 2 разных оттенках гаммы. Основной будет выполнен в красном, а вот синий уже перекрашен и доработан и исправлен в стилях. Вообщем это хорошо когда есть выбор, хотя на светлый фон они безусловно будут как изначально запланировал дизайнер. Сама основа будет темной и теперь не в ней самой будет меняться расцветок, это когда вы курсором наводите на рубрику. Сейчас будет ширина больше и от этого и видеться так оригинально. Тема может быть разной, это как онлайн ресурс, но дума. дольше подойдет к игровой. С каждой стороны будет флажки и вы можете устанавливать на любой каркас ширины.

Это у нас будет основной код:

Код
<div id="catmenu" style="overflow: visible;"><div class="nav-head"><div class="icon"><span></span><span></span><span></span><span></span></div><a href="#">Navigation</a></div>
  <!-- <sblock_nmenu> -->
<!-- <bc> --><div id="uNMenuDiv1" class="uMenuV"><ul class="uMenuRoot">
<li><a href="http://zornet.ru/"><span>Главная</span></a></li>
<li><a class="uMenuItemA current-item" href="/"><span>ZORNET.RU</span></a></li>
<li><a href="/"><span>Скрипты uCoz</span></a></li>
<li><a href="/"><span>Обратная связь</span></a></li>
<li><a href="/"><span>Шаблоны uCoz</span></a></li>
<li><a href="/"><span>О сайте</span></a></li></ul></div><!-- </bc> -->
<!-- </sblock_nmenu> -->  
  <span class="nav-rib rib-l"></span>
  <span class="nav-rib rib-r"></span>
  <div class="clr"></div><!--/U1AHEADER1Z-->
  <div class="clr"></div>
   
  </div>


И стиль под него:

Код
.clr {clear:both;}
.wrapper {margin:0 auto;}
#catmenu {line-height:58px;overflow:hidden;position:relative;padding:1px 20px 0;margin:0 0 40px;background: #000 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav.png) 0 0 repeat-x;}
#catmenu .nav-rib {display:block;position:absolute;width:20px;height:22px;background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/ribbon.png);top:18px;}
#catmenu .rib-l {left:-5px;}
#catmenu .rib-r {background-position:0 -22px;right:-5px;}
#catmenu .nav-head,#catmenu ul li em {display:none;}
#catmenu ul,#catmenu li {float:left;margin:0;padding:0;list-style:none;}
#catmenu li {padding:0 10px 0 0;}
#catmenu li.item-parent {position:relative;}
#catmenu li a {position:relative;display:block;float:left;color:#fff;font-size:18px;text-transform:uppercase;text-align:center;font-family:'Yanone Bold';}
#catmenu li a span {display:block;padding:0 10px;height:58px;line-height:58px;}
#catmenu li a:hover {text-decoration:none;}
#catmenu li a:hover span,#catmenu li a.uMenuItemA span {margin:8px 0 -8px;background:#b02a42 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-h.png) repeat-x;}
#catmenu li a:hover:before,#catmenu li a.uMenuItemA:before {content:"";position:absolute;left:-8px;bottom:-13px;width:0;height:0;border-top:8px solid #951c32;border-left:8px solid transparent;border-bottom:5px solid transparent;}
#catmenu li a:hover:after,#catmenu li a.uMenuItemA:after {content:"";position:absolute;right:-8px;bottom:-13px;width:0;height:0;border-top:8px solid #951c32;border-right:8px solid transparent;border-bottom:5px solid transparent;}
#catmenu .no-bd span,#catmenu .no-bg span {background:none!important;margin:0!important;}
#catmenu .no-bd:before,#catmenu .no-bg:before,#catmenu .no-bd:after,#catmenu .no-bg:after {display:none!important;}
#catmenu li a.uMenuItemA.no-bg:hover span,#catmenu li a.no-bd.uMenuItemA:hover span,#catmenu li.hover a.uMenuItemA span {background:#b02a42 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-h.png) repeat-x!important;margin:8px 0 -8px!important;}
#catmenu li a.uMenuItemA.no-bg:hover:before,#catmenu li a.no-bd.uMenuItemA:hover:before,#catmenu li a.uMenuItemA.no-bg:hover:after,#catmenu li a.no-bd.uMenuItemA:hover:after,#catmenu li.hover a.uMenuItemA:before,#catmenu li.hover a.uMenuItemA:after {display:block!important;}
#catmenu ul ul {float:none;height:auto;display:none;position:absolute;width:220px;top:58px;padding:13px 20px;z-index:200;background:#b12b43;}
#catmenu li li {float:none;height:auto;padding-right:0;}
#catmenu li li a {height:auto;line-height:normal;float:none;padding:7px 20px 7px 0;text-align:left;font-size:16px;font-family:'Yanone';}
#catmenu li li a:before,#catmenu li li a:after,#catmenu li.hover li.hover a.uMenuItemA:before,#catmenu li.hover li.hover a.uMenuItemA:after {display:none!important;border:none!important;}
#catmenu li li a span,#catmenu li.hover li.hover a span,#catmenu li.hover li.hover a.uMenuItemA span,#catmenu li li a.uMenuItemA span,#catmenu li.hover li a.uMenuItemA span,#catmenu li.hover li.hover a.uMenuItemA span,#catmenu li li a.uMenuItemA.no-bg:hover span,#catmenu li li a.no-bd.uMenuItemA:hover span,#catmenu li.hover li a.uMenuItemA span {height:auto;line-height:normal;background:none!important;margin:0!important;padding:0;}
#catmenu li li a:hover {background:#3a3a3a!important;padding:7px 20px 7px 10px;}
#catmenu li li.item-parent > a,#catmenu li li.item-parent > a:hover {background-image:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-a.png)!important;background-position:95% center!important;background-repeat:no-repeat!important;}
#catmenu ul ul ul {left:241px;top:1px;z-index:20;}




Теперь переходим к темно синему, код остается тот же а вот стили изменены.



Код
.clr {clear:both;}
.wrapper {margin:0 auto;}
#catmenu {line-height:58px;overflow:hidden;position:relative;padding:1px 20px 0;margin:0 0 40px;background: #000 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav.png) 0 0 repeat-x;}
#catmenu .nav-rib {display:block;position:absolute;width:20px;height:22px;background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/ribbon-11.png);top:18px;}
#catmenu .rib-l {left:-5px;}
#catmenu .rib-r {background-position:0 -22px;right:-5px;}
#catmenu .nav-head,#catmenu ul li em {display:none;}
#catmenu ul,#catmenu li {float:left;margin:0;padding:0;list-style:none;}
#catmenu li {padding:0 10px 0 0;}
#catmenu li.item-parent {position:relative;}
#catmenu li a {position:relative;display:block;float:left;color:#fff;font-size:18px;text-transform:uppercase;text-align:center;font-family:'Yanone Bold';}
#catmenu li a span {display:block;padding:0 10px;height:58px;line-height:58px;}
#catmenu li a:hover {text-decoration:none;}
#catmenu li a:hover span,#catmenu li a.uMenuItemA span {margin:8px 0 -8px;background:#2654A9 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-h-22.png) repeat-x;}
#catmenu li a:hover:before,#catmenu li a.uMenuItemA:before {content:"";position:absolute;left:-8px;bottom:-13px;width:0;height:0;border-top:8px solid #2552A7;border-left:8px solid transparent;border-bottom:5px solid transparent;}
#catmenu li a:hover:after,#catmenu li a.uMenuItemA:after {content:"";position:absolute;right:-8px;bottom:-13px;width:0;height:0;border-top:8px solid #2552A7;border-right:8px solid transparent;border-bottom:5px solid transparent;}
#catmenu .no-bd span,#catmenu .no-bg span {background:none!important;margin:0!important;}
#catmenu .no-bd:before,#catmenu .no-bg:before,#catmenu .no-bd:after,#catmenu .no-bg:after {display:none!important;}
#catmenu li a.uMenuItemA.no-bg:hover span,#catmenu li a.no-bd.uMenuItemA:hover span,#catmenu li.hover a.uMenuItemA span {background:#b02a42 url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-h-22.png) repeat-x!important;margin:8px 0 -8px!important;}
#catmenu li a.uMenuItemA.no-bg:hover:before,#catmenu li a.no-bd.uMenuItemA:hover:before,#catmenu li a.uMenuItemA.no-bg:hover:after,#catmenu li a.no-bd.uMenuItemA:hover:after,#catmenu li.hover a.uMenuItemA:before,#catmenu li.hover a.uMenuItemA:after {display:block!important;}
#catmenu ul ul {float:none;height:auto;display:none;position:absolute;width:220px;top:58px;padding:13px 20px;z-index:200;background:#b12b43;}
#catmenu li li {float:none;height:auto;padding-right:0;}
#catmenu li li a {height:auto;line-height:normal;float:none;padding:7px 20px 7px 0;text-align:left;font-size:16px;font-family:'Yanone';}
#catmenu li li a:before,#catmenu li li a:after,#catmenu li.hover li.hover a.uMenuItemA:before,#catmenu li.hover li.hover a.uMenuItemA:after {display:none!important;border:none!important;}
#catmenu li li a span,#catmenu li.hover li.hover a span,#catmenu li.hover li.hover a.uMenuItemA span,#catmenu li li a.uMenuItemA span,#catmenu li.hover li a.uMenuItemA span,#catmenu li.hover li.hover a.uMenuItemA span,#catmenu li li a.uMenuItemA.no-bg:hover span,#catmenu li li a.no-bd.uMenuItemA:hover span,#catmenu li.hover li a.uMenuItemA span {height:auto;line-height:normal;background:none!important;margin:0!important;padding:0;}
#catmenu li li a:hover {background:#3a3a3a!important;padding:7px 20px 7px 10px;}
#catmenu li li.item-parent > a,#catmenu li li.item-parent > a:hover {background-image:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-a.png)!important;background-position:95% center!important;background-repeat:no-repeat!important;}
#catmenu ul ul ul {left:241px;top:1px;z-index:20;}




PS - в коде есть такая строка:

Код
<li><a class="uMenuItemA current-item" href="/"><span>ZORNET.RU</span></a></li>


Она отвечает за то, что когда заходишь и она уже как будто открыта, что можете посмотреть на DEMO там все понятно, вы можете перенести на главную или на ту которую посчитаете нужным для себя., чтоб сразу было заметно.
20.05.2015 Просмотров: 479 Комментарий: (0)

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

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

Комментарий: 0
avatar