» »

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


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

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

Установка:

Код:

Код
<ul>  
  <li><a href="http://www.nizckod.ru" title=""><span>Главная</span></a></li>  
  <li><a href="http://zornet.ru/load/skripty/77" title=""><span>Скрипты uCoz</span></a></li>  
  <li><a href="http://zornet.ru/load/shablony/143" title=""><span>Шаблоны uCoz</span></a></li>  
  <li><a href="http://zornet.ru/load/oformlenie_saita/66" title=""><span>Скачать PSD</span></a></li>  
  <li><a href="http://zornet.ru/load/oformlenie_saita/logotipi_psd/135" title=""><span>Логотипы</span></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.04.2015 Просмотров: 313 Комментарий: (0)

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

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

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