Code
качать ТУТ http://narod.ru/disk/23024434000/Menu.rar.html
[Table]http://s46.radikal.ru/i113/1007/d1/dc182ca0b3d3.png[/Table]
Данное меню устанавливается в 4 этапа
1. Для начала нужно скачать архив и папку под названием main_menu закинуть в корень вашего сайта
2. Теперь нужно подключить css стили, для этого между и вставляем следующий код:
Code
<link rel="stylesheet" href="main_menu/css/style.css" type="text/css" charset="utf-8"/>
3. Далее в нужное вам место ставим код самого меню:
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>
Home
Выделенное зелёным изменяем на свое, а от класса, который я выделил красным, будет зависеть иконка данного пункта меню, при необходимости вы можете переставить их местами.
4. Ну и напоследок для получения эффекта анимации вставляем немножко jQuery перед закрывающимся тегом
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>
Всё достало.
