» »

Вертикальное меню Yellow для ucoz


По своему очень яркое, но классическое Вертикальное меню Yellow для ucoz которое подойдет к примеру к игровому порталу Minecraft и многим другим, где есть такой оттенок цвета. Также его можно поставить на светлый сайт по своим стилям и оно будет характерно выделятся, что особо нужно для навигаций. При наведение меняется гамма и есть там стрелка, которая указывает на тот или иное название, которая тоже цвет меняет, что смориться красиво и оригинально.

Это каркас, который можно поставить в блог или без него.

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


В CSS:

Код
#menu4 ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;}  

#menu4 {  
  width: 200px;  
  border-style: solid solid none solid;  
  border-color: #D76100;  
  border-size: 1px;  
  border-width: 1px;  
  margin: 10px;}  

#menu4 li a {  
  height: 32px;  
  voice-family: "\"}\"";  
  voice-family: inherit;  
  height: 24px;  
  text-decoration: none;}  

#menu4 li a:link, #menu4 li a:visited {  
  color: #9E3C02;  
  display: block;  
  background: url(http://zornet.ru/CSS-ZORNET/gerav/gesad/menu4.gif);  
  padding: 8px 0 0 30px;}  

#menu4 li a:hover, #menu4 li #current {  
  color: #fff;  
  background: url(http://zornet.ru/CSS-ZORNET/gerav/gesad/menu4.gif) 0 -32px;  
  padding: 8px 0 0 30px;}  

#menu4 li a:active {  
  color: #fff;  
  background: url(http://zornet.ru/CSS-ZORNET/gerav/gesad/menu4.gif) 0 -64px;  
  padding: 8px 0 0 30px;}


И смотрим материал в DEMO

На этом все, будут вопросы, задавайте в комментариях.
02.04.2015 Просмотров: 332 Комментарий: (4)

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

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

Комментарий: 4
First
First 02.04.2015 21:301
0
rolleyes biggrin
Kosten
Kosten 02.04.2015 21:342
0
First, заметил, что начал DEMO предоставлять, раньше фишку на эту тему не рубил, тут разобрался.
First
First 02.04.2015 21:383
0
Это правильно, пользователь может увидеть что берет
Kosten
Kosten 02.04.2015 21:484
0
First, времени только долго уходит, приходиться свои ссылки ставить, но думаю это важно для материала, визуально видеть.
avatar