[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
Цель – Одно Симпатичное Меню
Видели ли вы когда-нибудь потрясающие навигационные панели, сделанные с помощью JQuery, глядя на которые хочется сделать что-нибудь подобное самостоятельно? Сегодня нашей целью является создание такой панельки. Для этого мы сконструируем меню и оживим его забавными анимационными эффектами.
В результате у нас должно получиться вот что.
Введение – Что значит Easing
Такая органичная анимация, как в показанном выше меню, достигается за счет технологии Easing.
Flash Developer Center компании Adobe описывает этот термин чуть глубже:
"Термин easing означает плавное ускорение или замедление анимации, которое позволяет ей выглядеть реалистичнее. Easing обеспечивает более естественное ускорение и замедление за счет постепенной коррекции темпов изменения".
Благодаря плагину jQuery Easing мы получили возможность применять технологию Easing, не используя Flash и Actionscript. Плагин можно загрузить с официального сайта проекта.
Шаг 1 – Разработка структуры
Прежде всего, нам необходимо построить структуру меню. Файл XHTML, содержащий структуру, должен находиться в составе файлов проекта. Создайте новые документы XHTML, CSS и javaScript. Свои я назвал “animated-menu”. Далее создайте две папки в корневом каталоге для картинок и JavaScript.
Ничего сложного. Начинайте с загрузки необходимых библиотек и внешних файлов в корень. Я загрузил jQuery из онлайн архива Google code, а плагин (см. выше) поместил в папку "js". Внимание: порядок загрузки важен!
<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>
<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 должно быть задано для каждого элемента списка. Это позволит нам скрыть подзаголовок каждого элемента меню до тех пор, пока не запустится анимация.
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 секунды. Здесь с помощью плагина jQuery Easing реализуется метод ‘easeOutBounce’, который заставляет блок после завершения анимации ("out") слегка подпрыгнуть. Когда курсор выходит за границу элемента, запускается анимация, возвращающая элемент к первоначальному размеру.
Если вы хотите использовать этот прием для большего сайта, просто замените выбранный объект для обработки событий мыши (на данный момент выбран объект "li") на требуемый. Метод stop() стоит до анимации, чтобы предотвратить переполнение буфера, которое может возникнуть, если анимация часто повторяется. Такое может случиться при быстром перемещении мыши по пунктам меню. В статье Изучение jQuery дано более полное объяснение такого решения.
Шаг 5 - Украшаем
В итоговой версии я добавил фоновые рисунки для каждого элемента меню и файлы–исходники, чтобы проиллюстрировать некоторые возможности оформления созданного меню. Есть много других креативных способов добавить какую-то «изюминку» к внешнему виду меню. Продолжайте и экспериментируйте. Если у вас получится что-нибудь экстраординарное, поделитесь с нами в комментариях.
----------
Оригинальный текст статьи: How to Make a Smooth Animated Menu with jQuery
