Анимированное меню

Люблю я в свободное время побегать по интернет страничкам. Что-то посмотреть, присмотреть, прочитать, услышать, обсудить и просто получить много удовольствия.

В одну из таких свободных минуток, наткнулся на подборку красивых меню. Среди них довольно часто встречались с анимированным фоном. Смотрится неплохо. Я решил придумать свой способ реализации, о нем вы сейчас и узнаете.

Поскольку я сторонник традиционной верстки, т. е. без использование javascript возможностей, то изначально расскажу как сделать обычное меню. А потом мы лишь добавим к нему эффект анимации.

Создаем меню.
Шаг 1. Элементарный html код.
Сразу объясню все построение. Имеем родительский блок, например, блок для шапки страницы. В нем содержится ненумерованный список — наше меню.

Пункты содержат внутри себя ссылки на какие-либо страницы.

Шаг 2. Оформление меню.
Тут вы подстраиваетесь под себя. Я выбрал вот такие стили:

a{color:#fff;}
#header{width:393px;height:47px;margin:100px auto;}
#header ul{font-size:20px;list-style:none;height:47px;overflow:hidden;}
#header ul li{
width:101px;height:47px;border:0px solid #fff;text-align:center;float:left;margin:0 15px;
background:transparent url('line.png') no-repeat bottom center;position:relative;
}
#header ul li a{line-height:60px;width:101px;display:block;position:relative;z-index:200;}
#header ul li a:hover{background:url('radia.png');}


И использовал я следующие картинки:
Линия подчеркивания у ссылок.

Подсвечивание ссылки.

Самая главная часть работы уже проделана.

Шаг 3. Теоретическая задача для плавного появления фона.
Как и любой урок, анимированное меню тоже требует теории для своей реализации.

Есть у нас ссылка. Скриптом убираем стандартную смену фона. Далее создаем span, в котором будет наш фон. При наведении курсора на ссылку, наш span плавно подымется вверх.

Шаг 4. Анимированное меню.
jQuery код:

$(function(){
$('#header ul li').append(''); // Создаем span внутри каждого маркера списка.
$('#header ul li a')
.hover(
function(){ // Когда наводится курсор, запускаем функци.
$(this) // Ссылке, на которую навели курсор, будут присвоены следующие функции:
.parent().find('span') // Далее функции будут присваиваться объекту span, в котором находится фон:
.stop().animate({top:'0'}, 200, 'linear'); // Подымаем его вверх со скоростью 200 миллисекунд.
},function(){ // Когда курсор убрали, запускается функция.
$(this) // Ссылке, с котрой курсор, будут присвоены следующие функции:
.parent().find('span') // Далее функции будут присваиваться объекту span, в котором находится фон:
.stop().animate({top:$(this).height()}, 200, 'swing'); // Опускаем его вниз со скоростью 200 миллисекунд.
})
.css('background','transparent'); // Обнуляем стандартную смену фона.
});


Css код:

#header ul li span{
display:block;height:47px;width:101px;background:url('radia.png');
position:absolute;top:47px;
}


Меню получается симпатичнее. Самое главное, что при выключенном javascript меню будет функционировать.

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

Помните, что мое оформление не останавливается в этих рамках. Его можно сделать сколь угодно различным. Например, sohtanaka.com.