Главная » Создание сайтов » Верстка » Анимированное меню

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

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

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

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

Создаем меню.
Шаг 1. Элементарный html код.
Сразу объясню все построение. Имеем родительский блок, например, блок для шапки страницы. В нем содержится ненумерованный список — наше меню.
<div id="header">
<ul>
<li><a href="">О нас</a></li>
<li><a href="">Wi-Fi</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>

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

Шаг 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></span>'); // Создаем 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. С уважением, Vasilenko Ivan!

Комментарии — 4 комментария

  1. #9596 Timunya в 10:08, 10 апреля 2010:

    Ответить | Цитировать

    Спасибо! Клевая штука!

  2. #9597 SilverX в 15:31, 10 апреля 2010:

    Ответить | Цитировать

    Как раз кстати, надо было кнопки красивые сделать. спс

  3. #10086 DuCoz в 9:54, 18 августа 2010:

    Ответить | Цитировать

    Спасибо!

  4. [...] Анимированное меню — красивое меню, в котором приводится хитрый пример анимации. [...]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting