ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Горизонтальное меню DUV для uCoz с эффектом

Горизонтальное меню DUV для uCoz с эффектом

Что первое хочется сказать, это Горизонтальное меню DUV для uCoz с эффектом создано чисто на одних стилях и нет не одной ссылки под дизайн. При наведение курсора нет такого, что вся категория меняет оттенок, здесь появляется красивая фигура и в ней уже будет прописана категория. Основная гамма, это серый, ближе к светлому, и вы можете разместить на своем ресурсе, если есть детали сайта в алом цвете, то в таком случай отлично подойдет. Если присмотреться, то углов здесь нет и так создано, что низ проходит как полоска, которая и придает свой неповторимый вид.

Код

<br>
<ul id="menu">
  <li><a href="http://zornet.ru/">Главная</a></li>
  <li><a href="#">ZORNET.RU</a></li>
  <li><a href="#">Скрипты для сайта</a></li>
  <li><a href="#">Статьи</a></li>
  <li><a href="#">Каталог файлов</a></li>
</ul>

CSS:

Код

#menu {
position:relative;
list-style: none;
font-size: 0.99em;
font-family: Georgia, "Times New Roman", Times, serif;
height:3em;
text-align:center;
margin:0px 20px 0px 20px;
border: 1px solid #d9d5d5; /* Параметры рамки вокруг */
background: #c8cfd5;
background: -moz-linear-gradient(#eaeef1, #8f9ca7);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeef1), to(#8f9ca7));
background: -o-linear-gradient(#eaeef1, #8f9ca7);
background: linear-gradient(#eaeef1, #8f9ca7);
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696;
box-shadow: 2px 2px 3px #969696;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#eaeef1', endColorstr='#8f9ca7');/* IE6 & IE7 */
  -moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
  }
#menu li {
  float: left;
  }
#menu li a {
  letter-spacing: 1px;
  padding: 9px;
  margin: 6px 6px 4px 6px;
  display: block;
  color: #fff;
  }
#menu li a:hover {
color: #fff;
border-radius: 13px 0px 13px 0px;

border-bottom: 1px solid #f36;
  background: #c8cfd5;
background: -moz-linear-gradient(#eaeef1, #900);
background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeef1), to(#900));
background: -webkit-linear-gradient(#eaeef1, #900); background: -o-linear-gradient(#eaeef1, #900);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#eaeef1', endColorstr='#90052c');/* IE6 & IE7 */
background: linear-gradient(#eaeef1, #900);
-moz-box-shadow: 0px 0px 13px #900;
  -webkit-box-shadow: 0px 0px 13px #900;
  box-shadow: 0px 0px 13px #900;
}

11 Мая 2015 Просмотров: 1316 Комментариев: (0)

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

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

Kosten

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