Одноуровневое меню с помощью jQuery

По ссылкам, расположенным ниже, можно посмотреть пример того, что у нас должно получиться и скачать готовый код.

Начнем, как это всегда бывает, с HTML разметки. В ней все традиционно для меню - ненумерованный список:

<ul class="menu">
	<li><a href="#">О сайте</a></li>
	<li><a href="#">Бизнес</a></li>
	<li><a href="#">Искусство</a></li>
	<li><a href="#">Живопись</a></li>
	<li><a href="#">Дизайн</a></li>
	<li><a href="#">Творчество</a></li>
	<li><a href="#">История</a></li>
</ul>

Далее подключаем библиотеку (если она еще не подключена к сайту) и вставляем в js файл следующий небольшой код:

(function($){
	$(function(){
		var nav = $('.menu li a');
		nav.each(function(){
			$(this).append('<span>'+ $(this).html() +'</span>');
		});
		nav.hover(
			function(){
				$(this).stop().animate( {marginTop:'-33px'}, 400 );
			},
			function(){
				$(this).animate( {marginTop:'0'}, 500 );
			}
		)
	});
})(jQuery);}

Скрипт добавляет в каждый пункт меню элемент span в котором дублируется текст, прописанный в ссылке. При наведении ссылка смещается вверх а ее место занимает span. Больше ничего скрипт не делает.

И наконец приступим к самому трудоемкому процессу - оформлению. Оформить пункты меню можно по разному. Самый надежный в данном случае способ - использовать фоновые картинки (гарантировано одинаковое отображение и поведение в разных браузерах). Код css представлен ниже:

.menu{
margin:40px 0;
padding:0;
width:100%;
float:left;
font-family:Georgia;
}
.menu li{ 
height:32px;
float:left;
overflow:hidden; 
}
.menu li a, .menu li a span {
padding:0 12px;
display:block; 
line-height:33px;
color:#FFF; 
text-transform:uppercase; 
text-decoration:none;
font-size:12px; 
}
.menu li a {
background:url(fon_link_nav.png) no-repeat top right;
}
.menu li:first-child {
border-left:1px solid #999;
}
.menu li a span {
margin:0 -12px;
background:url(fon_span_nav.png) no-repeat top right;
}

Если позволяет дизайн, то пункты навигации можно оформить с помощью, например, css3 (без использования картинок).

Ну и в заключении немного дегтя. К сожалению, не получинся сделать подобным методом многоуровневое меню из-за применения в li свойства overflow:hidden;.