ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Верительное меню сайта SFARGAZ для uCoz

Верительное меню сайта SFARGAZ для uCoz

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

Каркас:

Код

<div class="text">
  <ul class="menu">

  <li><a href="http://zornet.ru/">Главная</a></li>
  <li><a href="http://zornet.ru/">Шаблоны</a></li>
  <li><a href="http://zornet.ru/">Шаблоны CS</a></li>
  <li><a href="http://zornet.ru/">Скрипты сайта</a></li>
  <li><a href="http://zornet.ru/">PHP Скрипты uCoz</a></li>
<li><a href="http://zornet.ru/">ZORNET.RU</a></li>
  <li><a href="http://zornet.ru/">Полезные статьи</a></li>
<li><a href="http://zornet.ru/">Графика для uCoz</a></li>
</ul>
  </div>

CSS:

Код

ul.menu {
margin: 0px;
padding: 0px;
list-style: none;
}

ul.menu li {
height: 27px;
line-height: 27px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
margin: 4px 0;
background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu.png);
}

ul.menu li:hover {
background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu-hover.png);
}

ul.menu li a {
display: block;
height: 27px;
line-height: 27px;
color: white;
background: url(http://zornet.ru/CSS-ZORNET/Grety/zreg/ZR/menu-li.png) 5px center no-repeat;
text-decoration: none;
padding: 0 10px 0 23px;
}

Можете посмотреть DEMO, где будет на всю ширину, так как не вставлено в сам блок ресурса, при установке оно встанет по центру как нужно.

04 Мая 2015 Просмотров: 1111 Комментариев: (0)

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

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

Kosten

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