Анимированный ховер для навигации на mootools

Последнее время писал много о плагинах, и все они были разработаны на jQuery, хочется немного разбавить эту тематику плагином на mootools. Долго перебирал свои разработки на этом фреймверке и не мог выбрать наиболее интересное, ведь по сути решений на JavaScript написано много – галереи, динамические формы, лайтбоксы, аккордеоны и т.п., поэтому хотелось рассказать о чем-то редком.

Представляю Вам плагин “Анимированный ховер для навигации“. Чем же он интересен?
Прежде всего тем, что основные параметры анимации задаются в css файле!
А также тем, что такой плагин я не встречал, но, правда, видел аналогичные скрипты, которые не обладали универсальностью, а были захардкожены под определенные стили. Если я ошибаюсь, хотел бы увидеть ссылки в комментариях.

По традиции, чтоб было интереснее, сразу покажу пару примеров:

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

Для работы плагина подключаем JavaScript

Рассмотрим параметры:

defClassName- название класса для начальных стилей
animatedClassName- название класса для анимации при ховере
animatedClassNameActive- название класса для анимации активного элемента
element- селектор элемента анимации
duration- время анимации
parentActiveClass- название класса родителя активного элемента

Требования HTML/CSS верстки для плагина

Требований для HTML/CSS у плагина нет, просто ссылаемся в настройках на список элементов и указываем названия классов для анимации.

Рассмотрим несколько примеров

Пример №2

.default3 {
color:#e1dddd;
font-size:12px;
margin:2px 0;
border:0;
}
.animate3 {
color:#e1dddd;
font-size:16px;
margin:0;
border:1px solid #005d82;
border-width:2px 0;
}
.animateActive3 {
color:#ff0000;
}

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

Пример №3

.default4 {
color:#e1dddd;
margin:0;
font-size:12px;
line-height:30px;
border-top:1px solid #005d82;
border-width:1px 0 0;
}
.animate4 {
color:#e1dddd;
font-size:16px;
line-height:40px;
margin:-10px 0 0;
}
.animateActive4 {
color:#ff0000;
}

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

Пример №4

.nav5 li a {
background:#2a2a2a url(../images/nav.gif) no-repeat;
}
.default5 {
color:#e1dddd;
background-position:-200px 0;
}
.animate5 {
color:#000000;
background-position:0 0;
}
.animateActive5 {
color:#ff0000;
background-position:0 40px;
}

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

Пример №5

.nav6 li a {
background:url(../images/corner.png) no-repeat;
}
.default6 {
background-color:#2a2a2a;
}
.animate6 {
background-color:#005d82;
}
.animateActive6 {
background-color:#ff0000;
}

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