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

Меню горизонтальное rezenta для ucoz

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

Установка:

Код:

Код

<ul>
 <li><a href="http://www.nizckod.ru" title="">Главная</a></li>
 <li><a href="http://zornet.ru/load/skripty/77" title="">Скрипты uCoz</a></li>
 <li><a href="http://zornet.ru/load/shablony/143" title="">Шаблоны uCoz</a></li>
 <li><a href="http://zornet.ru/load/oformlenie_saita/66" title="">Скачать PSD</a></li>
 <li><a href="http://zornet.ru/load/oformlenie_saita/logotipi_psd/135" title="">Логотипы</a></li>
</ul>

CSS:

Код

ul {
  font-family: Georgia;
  list-style-type: none;
  font-size: 14px;
  color: #fff;
  height: 50px;
  width: 510px;
  margin: 0 auto;
  padding-top: 15px;
  }
ul li {
  float: left;
  padding: 1px;
  text-align: center;
  }
ul li a {
  float: left;
  display: block;
  background: #0094D6;
  text-decoration: none;
  color: #fff;
  position: relative;
  }
ul li a:hover {
  background: #FF7700;
  z-index: 10;
  margin: 0 -10px;
  top: -10px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  }
ul li a span {
  float: left;
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  width: 100px;
  cursor: pointer;
  }
ul li a:hover span {
  width: 120px;
  padding: 20px 0;
  }

Здесь внимательно смотрим DEMO

07 Апреля 2015 Просмотров: 919 Комментариев: (0)

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

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

Kosten

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