Данное меню устанавливается в 4 этапа 1. Для начала нужно скачать архив и папку под названием main_menu закинуть в корень вашего сайта
2. Теперь нужно подключить css стили, для этого между <head> и </head> вставляем следующий код:
Code
<link rel="stylesheet" href="main_menu/css/style.css" type="text/css" charset="utf-8"/>
Code
<ul id="navigation">
<li class="home"><a href="Адрес ссылки"><span>Home</span></a></li>
<li class="about"><a href="Адрес ссылки"><span>About</span></a></li>
<li class="search"><a href="Адрес ссылки"><span>Search</span></a></li>
<li class="photos"><a href="Адрес ссылки"><span>Photos</span></a></li>
<li class="rssfeed"><a href="Адрес ссылки"><span>Rss Feed</span></a></li>
<li class="podcasts"><a href="Адрес ссылки"><span>Podcasts</span></a></li>
<li class="contact"><a href="Адрес ссылки"><span>Contact</span></a></li>
</ul>
<li class="home"><a href="Адрес ссылки"><span>Home</span></a></li>
Выделенное зелёным изменяем на свое, а от класса, который я выделил красным, будет зависеть иконка данного пункта меню, при необходимости вы можете переставить их местами. 4. Ну и напоследок для получения эффекта анимации вставляем немножко jQuery перед закрывающимся тегом </body>
Code
<script type="text/javascript" src="main_menu/jquery-1.3.2.js"></script>
<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>
