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

Темное горизонтальное меню FrenTada для uCoz

Прежде чем его устанавливать и проверять, не подумал, что Темное горизонтальное меню FrenTada для uCoz будет интересно в своих функциях. Это стороны, с левой стороны идут категорий, можно сказать основные, но также с правой они есть. Но там можно разместить к примеру контакты или связь с администратором. Тут будет еще зависеть от самой ширины каркаса, если широкий, то центр будет осень замечен, так как на нем не чего не будет, в том так сказать и замысел был.

Теперь по установке, это можно поставить в низ шапки или верх сайта, но по умолчанию. Но вот предлагаю картинку, где навигация установлена в самом шаблоне и смотрится очень красиво.

Код:

Код

<div class="nav-box">
 <div class="left">
 <div class="right">
 <ul class="nav">
 <li><a href="/" {hit}="http://zornet.ru/">Все видео</a></li>
 <li><a href="http://zornet.ru/" {hit}="">Скрипты</a></li>

 <li><a href="http://zornet.ru/18" {hit}="">Шаблоны</a></li>
 <li><a href="http://zornet.ru/6" {hit}="">Все для сайта</a></li>
 <li><a href="/" {hit}="">ZORNET.RU</a></li>
 <li><a href="http://zornet.ru/4" {hit}="">Драмы</a></li>
 <li style="float: right;"><a href="http://zornet.ru/0-4">Контакты</a></li>
 <li style="float: right;"><a href="/">О проекте</a></li>
 <li style="float: right;"><a href="/">Помощь</a></li>
 </ul>
 </div>
 </div>
 </div>

CSS:

Код

.nav-box {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-bg.gif) 0 0 repeat-x;
  width:75%;
}
  .nav-box .left {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-left.gif) 0 0 no-repeat;
  }
  .nav-box .right {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-right.gif) no-repeat 100% 0;
  height:29px;
  }

.nav {
  padding:3px 0 0 3px;
}

ul.nav {
  list-style-type: none;
  padding: 3px 3px;
  margin: 0px;
}
.nav li {
  float:left;
  padding-right:3px;
}
  .nav li a {
  float:left;
  color:#fff;
  text-decoration:none;
  }
  .nav li span {
  float:left;
  cursor:pointer;
  }
  .nav li span span {
  padding:0 10px 0 10px;
  line-height:23px;
  }

  .nav li a:hover, .nav li a.current {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-link-bg.gif) 0 0 repeat-x;
  color:#3f3f3f;
  }
  .nav li a:hover span, .nav li a.current span {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-link-left.gif) 0 0 no-repeat;
  }
  .nav li a:hover span span, .nav li a.current span span {
  background:url(http://zornet.ru/CSS-ZORNET/Grety/Menu-1/nav-link-right.gif) no-repeat 100% 0;
  }

Ширина регулируется в стилях, находим width:75% и выставляем как нужно.

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

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

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

Kosten

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