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

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

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

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


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

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

<script type="text/javascript" src="js/mootools-1.2.1.js"></script>
<script type="text/javascript" src="js/navAnimated.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function(){
        var nav = new navAnimated('.nav',
        {
            defClassName:'default',
            animatedClassName:'animate',
            animatedClassNameActive:'animateActive',
            element:'a',
            duration: 300,
            parentActiveClass:'active'
        });
    });
</script>

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

  • 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;
}

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

Скачать плагин

Tags: , ,

Воскресенье, Март 8th, 2009 JS Plugins, JavaScript, Mootools

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

  • alf:

    Очень неплохо, спасибо!

  • Хороший тутор на 5+ :)

  • dobs:

    Спасибо, думаю что пригодится…

  • Спасибо за информацию. Успехов Вам!

  • Не работает паралельно с библиотекой jQuery 1.3.2.Что Делать? =(

  • Воспользоваться jQuery.noConflict()
    http://docs.jquery.com/Core/jQuery.noConflict

  • Спасибо большое! У Вас очень хороший блог!

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы