Как сделать плавное меню с анимацией с помощью jQuery

В данном уроке мы будем учиться создавать интересное меню с анимацией и красивыми эффектами.

Цель - Плавное меню

Вот демо версия результата.

Вступление - Объяснение термина "easing"

В нашем меню присутствует плавная анимация и все это происходит благодаря "easing". Для полного понимания данного термина обратимся к центру разработчиков Flash:

Термин "easing" означает постепенное ускорение и замедление во время анимации, что позволяет ей выглядеть более реалистично. "Easing" создает более правдоподобный вид ускорения или замедления, путем постепенной подстройки скорости изменений.

Благодаря магическому плагину jQuery Easing, у нас есть возможность использовать "Easing" за пределами Flash и Actionscript сред.

Шаг №1 - Подготовьте структуру

Прежде чем начинать работу c jQuery необходимо быстро создать структуру меню с помощью XHTML и загрузить необходимые файлы. Создайте новые XHTML, CSS и javascript документы. Я выбрал название для каждого "animated-menu". Также создайте две папки - одна для картинок, вторая для javascript. Ниже скриншот для ясности:

Ничего особенного, как Вы видите. Теперь в html файле начните загружать необходимые библиотеки и внешние файлы в шапке. Я решил загрузить jQuery из архива кода от Google, а плагин "Easing" из папки "js". Порядок подгрузки файлов очень важен.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smooth Animated jQuery Menu</title>

<link rel="stylesheet" href="animated-menu.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
</head>

Далее скопируйте структуру меню в тег body:

<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
</body>
</html>

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

Шаг № 3 - CSS

Теперь когда структура готова, давайте добавим несколько простых стилей для приведения меню в порядок. Свойство overflow должно быть hidden для каждого элемента меню. Это сделано для того, чтоб подзаголовки каждого элементы не были видны.

body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}

ul{
margin:0;
padding:0;
}

li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}

a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
padding-top:15px;
}

/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}

Шаг № 4 - Анимация с jQuery

Весь код jQuery необходимо поместить в javascript файл, который Вы создали раньше. Если Вы последовали моему примеру, то название у файла "animated-menu.js".

$(document).ready(function(){

//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Код сверху описывает два действия. Когда  пользователь наводит мышь на меню, его элементы начинают анимацию - растягивается до 150 пикселей за 0.6 секунд. "Easing" (подключается функцией 'easeOutBounce') заставляет меню немного попрыгать когда оно достигает конца анимации ("out"). Когда мышку с меню убирают начинается анимация, которая приводит меню в изначальный вид.

Шаг № 5 - Добавление изюминки

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dynamicdrive.com
Перевел: Максим Шкурупий
Урок создан: 16 Марта 2009
Просмотров: 96623
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^