» »

Горизонтальное меню NYG зеленый цвет для uCoz


Горизонтальное меню NYG зеленый цвет для uCoz

Очень много скриптов на тему навигация по сайту, а мы разберем Горизонтальное меню в зеленой цвете для uCoz, так как по своему характеру стилей оно не сложное и вы можете его отлично подогнать на свой ресурс. Вообщем по умолчанию оно идет в светлых тонах и где нет не одной ссылки. И цвет вы можете править сами в самом CSS и менять описание также по его гамме, что приведу ниже. У него очень много было под категорий, что пришлось убрать и оставить одну, чтоб вам было понятно, если начнете добавлять их к разделу.

Вот только поправил немного.



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

Код
<div width="100%">
<ul id="hmenu">
  <li><a href="http://zornet.ru/">Главная</a></li>
  <li><a href="http://zornet.ru/load">Скрипты сайта</a></li>
  <li><a href="http://zornet.ru/video"><b>Видео уроки</b></a></li>
  <li><a href="http://zornet.ru/publ">Статьи</a></li>
  <li><a href="http://zornet.runews">Новости</a></li>

  <li><a href="http://zornet.ru"><strong>ZORNET.RU</strong></a>
  <ul>
  <li><a href="/">Скрипты сайта</a></li>
  <li><a href="/">Скрипты сайта</a></li>
  <li><a href="/">Скрипты сайта</a></li>
   
  </ul>
  </li>

  <li><a href="http://zornet.ru">Помощь</a>
   
  </li>
</ul>
</div>


CSS:

Код
#hmenu {width: 100%; background-color: #9F9; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);}
#hmenu, #hmenu ul {margin: 0; padding: 0; list-style: none; margin-bottom: 20px;}
#hmenu:before, #hmenu:after {content: ""; display: table; }
#hmenu:after {clear: both;}
#hmenu {zoom:1;}
#hmenu li {float: left; border-right: 1px solid #217C21; position: relative;}
#hmenu a {float: left; padding: 16px 22px 16px 22px; color: #000; text-decoration: none;}
#hmenu li:hover > a {color: #000; background: #fbb905;}
*html #hmenu li a:hover { /* IE6 only */ color: #000000; background: #fbb905;}
#hmenu ul {margin: 20px 0 0; _margin: 0px; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 55px; left: 0px; z-index: 9999; background: #9F9; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#hmenu li:hover > ul {opacity: 1; visibility: visible; margin: 0;}  
#hmenu ul ul {top: 0px; left: 208px; _margin: 0;}  
#hmenu ul li {float: none; display: block; border: 0; _line-height: 0px;}  
#hmenu ul a {padding: 11px 10px; width: 180px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; text-decoration: none;}
#hmenu ul a:hover {background: #fbb905;}
#hmenu ul li:first-child > a:after {content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #9F9;}  
#hmenu ul ul li:first-child a:after {left: -6px; top: 50%; margin-top: -6px; border-left: 0px; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #9F9;}
#hmenu ul li:first-child a:hover:after {border-bottom-color: #fbb905;}
#hmenu ul ul li:first-child a:hover:after {border-right-color: #fbb905; border-bottom-color: transparent;}
@media screen and (max-width: 1024px) {.hmenu_none {display: none;}}


16.05.2015 Просмотров: 355 Комментарий: (0)

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

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

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