» »

Горизонтальное меню BLAYDAS для ucoz


Это скрипт не новый и можно было увидеть Горизонтальное меню BLAYDAS для ucoz на многих интернет ресурсах. Вообщем оно отлично отражает свой дизайн на сайтах, которые по своей структуре фиксированные по ширине. Также хочется заметить, что оно будет на полном сайте работать отлично и на нем можно вывести ту информацию, которую вы считаете главным. С ним идет 3 ссылки а это означает, что грузить главную страницу не будет. Создано для светлого фона, но я его поставил на темный и смотрится отлично, что можете сами лицезреть в демо режиме.

Код:

Код
<ul id="menu">  
<li><a href="" title="Главная"><img src="http://zornet.ru/CSS-ZORNET/gerav/Yor/home.png" alt="Home" class="home" /></a></li>  
<li><a href="" title="Форум поддержки">Форум поддержки</a></li>  
<li><a href="" title="Скрипты">Скрипты для сайта</a></li>  
<li><a href="" title="ZORNET">ZORNET.RU</a></li>  
<li><a href="" title="Шаблоны">Шаблоны для сайта</a></li>  
</ul>


CSS:

Код
body {font: 11px Arial, Helvetica, sans-serif;  
  }
#menu {font: 11px Arial, Helvetica, sans-serif;
  background-image:url('http://zornet.ru/CSS-ZORNET/gerav/Yor/bc_bg.png');  
  background-repeat:repeat-x;
  height:30px;
  line-height:30px;
  color:#9b9b9b;
  border:solid 1px #cacaca;
  width:100%;
  overflow:hidden;
  margin:0px;
  padding:0px;
  }
  #menu li {list-style-type:none;
  float:left;
  padding-left:10px;
  }
  #menu a {height:30px;
  display:block;
  background-image:url('http://zornet.ru/CSS-ZORNET/gerav/Yor/bc_separator.png');  
  background-repeat:no-repeat;  
  background-position:right;
  padding-right: 15px;
  text-decoration: none;
  color:#454545;
  }
  .home {border:none;
  margin: 8px 0px;
  }
#menu a:hover{color: gray;
  }


18.04.2015 Просмотров: 306 Комментарий: (0)

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

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

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