Довольно простое меню, но мне оно очень понравилось. Здесь не используются скрипты и изображения. Только html и css.
В то место, где вам нужно меню, ставим следующий код:
Code
<ul>
<li><a href="" title=""><span>Главная</span></a></li>
<li><a href="" title=""><span>Новости</span></a></li>
<li><a href="" title=""><span>Контакты</span></a></li>
<li><a href="" title=""><span>Портфолио</span></a></li>
<li><a href="" title=""><span>Форум</span></a></li>
</ul>
Редактируйте ссылки по своему усмотрению.
Затем, в ПУ-->Управление дизайном-->CSS. В любое место добавляем это:
Code
ul {
font-family: Georgia;
list-style-type: none;
font-size: 14px;
color: #fff;
height: 50px;
width: 510px;
margin: 0 auto;
padding-top: 15px;
}
ul li {
float: left;
padding: 1px;
text-align: center;
}
ul li a {
float: left;
display: block;
background: #0094D6;
text-decoration: none;
color: #fff;
position: relative;
}
ul li a:hover {
background: #FF7700;
z-index: 10;
margin: 0 -10px;
top: -10px;
opacity: 0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
}
ul li a span {
float: left;
display: block;
padding: 10px 0;
text-decoration: none;
color: #fff;
width: 100px;
cursor: pointer;
}
ul li a:hover span {
width: 120px;
padding: 20px 0;
}
Написать нам
О нас
Контакты
