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

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

По своему коду очень простое навигация, которое больше подойдет к модулю блог. Также нужно заметить, что Горизонтальное меню GreenTa для ucoz идет с 3 ссылками, что безусловно на загруженность сайта не повлияет. При наведение, что вы написали, а точнее надпись немного тускнеет, но вы можете сделать как вам нужно. Даже взять одну картинку перекрасить в другой цвет и будет под ваш дизайн. По умолчанию идет зеленый, как уже было сказано, он будет только в начале, что можете посмотреть.

Код:

Код

<div id="menu">
<ul>
<li><a href="http://zornet.ru/" class="current">Главная</a></li>
<li><a href="ссылка">Скрипты для ucoz</a></li>
<li><a href="ссылка">Шаблоны для ucoz</a></li>
<li><a href="ссылка">Файлы ZORNET.Ru</a></li>
<li><a href="ссылка">Название</a></li>
<li><a href="ссылка">Название</a></li>
</ul>
</div>

CSS:

Код

*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
}
#menu ul{
list-style:none;
}
#menu li{
background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/menu_035_bg.jpg) repeat-x;
list-style:none;
display:block;
float:left;
height:36px;
border-right:1px solid #dbdbdb;
line-height:36px;
}
#menu li a{
display:block;
float:left;
color:#b1b1b1;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:36px;
text-decoration:none;
padding:0 25px;
}
#menu li a:hover{
color:#747474;
background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/recc47.html) repeat-x;
}
#menu li a.current{
display:block;
float:left;
color:#6c822e;
background:url(http://zornet.ru/CSS-ZORNET/gerav/refad/menu_035_c.jpg) repeat-x;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:36px;
text-decoration:none;
padding:0 25px;
}
#menu li a:hover.current{
color:#6c822e;
}

Предоставляется для вас просмотр DEMO

05 Апреля 2015 Просмотров: 1094 Комментариев: (0)

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

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

Kosten

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