Это простое, симпатичное горизонтальное меню располагается вверху web страницы с выплывающими пунктами при наведении. В нём используется CSS и JavaScript.
HTML разметка:
<ul id="navigation">
<li class="home"><a href="ССЫЛКА"><span>Главная</span></a></li>
<li class="news"><a href="ССЫЛКА"><span>Новости</span></a></li>
<li class="auth"><a href="ССЫЛКА"><span>Вход</span></a></li>
<li class="reg"><a href="ССЫЛКА"><span>Регистрация</span></a></li>
<li class="compet"><a href="ССЫЛКА"><span>Конкурсы</span></a></li>
<li class="tos"><a href="ССЫЛКА"><span>Правила</span></a></li>
<li class="supp"><a href="ССЫЛКА"><span>Поддержка</span></a></li>
</ul>
CSS стили:
ul#navigation {
position: fixed; /* ФИКСИРОВАННОЕ позиционирование */
margin: 0px;
padding: 0px;
top:102px; /* Положение от верхнего края */
right: 300px; /* Положение от правого края */
list-style: none;
z-index:1; /* Позиционированние элемента */
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
}
ul#navigation li a:hover {background-color:#CAE3F2;}
ul#navigation li a span {
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .home a {background-image: url(home.png);}
ul#navigation .news a {background-image: url(news.png);}
ul#navigation .auth a {background-image: url(auth.png);}
ul#navigation .reg a {background-image: url(reg.png);}
ul#navigation .compet a {background-image: url(compet.png);}
ul#navigation .tos a {background-image: url(tos.png);}
ul#navigation .supp a {background-image: url(supp.png);}
avaScript для выплывающих пунктов при наведении:
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
Вот и всё. Надеюсь Вам понравилось. Удачи Вам.
|