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

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

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

Установка:

Код:

Код

<div id="menu">
  <ul>
  <li><a href="https://zornet.ru" class="current">Главная</a></li>
  <li><a href="#">ZORNET.RU</a></li>
  <li><a href="#">Скрипты ucoz</a></li>
  <li><a href="#">Шаблоны ucoz</a></li>
  </ul>
</div>

CSS:

Код

#menu{
/* margin:0 auto;*/
  width:700px;
  height:59px;
  background:url(https://zornet.ru/CSS-ZORNET/gerav/refad/33966158.jpg) repeat-x;
  }
  #menu ul{
  list-style:none;
  margin:0 auto;
  width:500px;
  }
  #menu li{
  list-style:none;
  display:block;
  float:left;
  height:59px;
  line-height:59px;
  }
  #menu li a{
  display:block;
  float:left;
  color:#a7a7a7;
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
  line-height:59px;
  text-decoration:none;
  padding:0 20px;
  }
  #menu li a:hover{
  color:#fff;
  background:url(https://zornet.ru/CSS-ZORNET/gerav/refad/43404672.jpg) no-repeat bottom;
  }
  #menu li a.current{
  display:block;
  float:left;
  background:url(https://zornet.ru/CSS-ZORNET/gerav/refad/43404672.jpg) no-repeat bottom;
  color:#fff;
  text-transform:uppercase;
  font-size:11px;
  font-weight:bold;
  line-height:59px;
  text-decoration:none;
  padding:0 20px;
  }
  #menu li a:hover.current{
  color:#fff;
  background:url(https://zornet.ru/CSS-ZORNET/gerav/refad/22364790.jpg) no-repeat bottom;
  }

08 Апреля 2015 Просмотров: 1502

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

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

Kosten