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

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

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

Это основа, ставим там где нужно, основном вверх сайта и в самый его низ прописываем.

Код

<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Контакты</a></li>
<a href="http://zornet.ru/" style="display: none;"></a>
</ul>
</div>

CSS:

Код

#menu {width:100%; margin:0; padding:0;}
#menu ul {list-style:none;}
#menu li {list-style:none; display:block; float:left;}

#menu li a {
  font-family:sans-serif;
  display:block;
  float:left;
  height:50px;
  color:#F4F4F4;
  font-size:18px;
  font-weight:bold;
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_left6.png) no-repeat left;
  line-height:49px;
  padding:0 0 0 20px;
  text-decoration:none;}

#menu li a span {
  display:block;
  float:left;
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_right6.png) no-repeat right;
  height:50px;
  color:#F4F4F4;
  line-height:49px;
  padding:0 20px 0 0;}

#menu li a:hover {
  display:block;
  float:left;
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_left_h6.png) no-repeat left;
  height:50px;}

#menu li a:hover span {
  display:block;
  float:left;
  background:url(http://zornet.ru/CSS-ZORNET/gerav/menu_right_h6.png) no-repeat right;
  color:#fff;
  height:50px;}

Это вид, когда вы нажимаете на раздел:

Можете посмотреть, реальный вид DEMO

02 Апреля 2015 Просмотров: 1291 Комментариев: (1)

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

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 02 Апреля 2015 23:32¹ 0 Здесь вы можете добавлять свои категорий по вашему дизайну, точнее по ширине его.