Анимированная навигация

Продолжаю цикл статей о разработанных мной плагинах. На этот раз рассмотрим плагин для анимации какого-либо меню или навигации. Это аналог fancy menu mootools но на jQuery.

Навигация с различными эффектами добавляет на ваш сайт немного динамики, что визуально выглядет очень красиво.

Но обойдемся без лишней риторики… представляю вам первый вариант:

Открыть пример в новом окне

Что нужно для работы плагина

Подключить JavaScript

Где jquery.animationNav.js JS для навигации, а jquery.easing.1.3.js – плагин для добавления эффектов в анимацию

нициализировать скрипт

$(document).ready(function(){
$('ul').animationNav({
duration:1000,
addBG:'<li class="bg"><a href="#"><span> </span></a></li>',
bgClass :'bg',
animEffect: 'easeOutBack'
});
});

Где указываются параметры

duration – время выполнения анимации
addBG – элементы добавляемые для background
bgClass – название класса у добавляемого элемента
animEffect – эффект навигации

HTML структура очень проста и не требуют никаких нюансов при верстке:

<ul>
<li class="active"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт навигации 2</a></li>
<li><a href="#">Динная надпись в навигации :)</a></li>
<li><a href="#">Пункт 3</a></li>
</ul>

CSS требует определенных правил:

я опишу только необходимые параметры для корректного отображения и анимации, все остальное зависит от вашего воображения

ul.exemple1 {
position:relative;
}
ul.exemple1 li {
float:left;
position:relative;
z-index:1;
}
/* свойства элемента для bg */
ul.exemple1 li.bg {
position:absolute;
top:0;
left:0;
z-index:0;
}