вРазные полезности

Горизонтальное меню 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;}

источник: zornet.ru

Похожие посты