В данном уроке мы будем учиться создавать интересное меню с анимацией и красивыми эффектами.
Вступление - Объяснение термина "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". Порядок подгрузки файлов очень важен.
Code
<!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:
Code
<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 для каждого элемента меню. Это сделано для того, чтоб подзаголовки каждого элементы не были видны.
Code
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".
Code
$(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 - Добавление изюминки
Я также добавил фоновые изображения к каждому элементу меню, чтоб показать вам возможности для доработки дизайна. Есть масса других креативных путей, которые могут придать Вашему меню индивидуальности. Экспериментируйте и никогда не сдавайтесь.
