2 779 Скрипты / Menu & Nav

Анимированное меню

Анимированное меню

Анимированное меню в котором при наведении на ссылку, происходит её прокрутка сверху вниз с заменой задника и цвета шрифта.

HTML

        <div id="menu" class="menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Портфолио</a></li>
                <li><a href="#">Услуги</a></li>
                <li><a href="#">Поддержка</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </div>

CSS

Основа css в коде ниже, а более подробно смотрите в демо.

JS

Подключаем jQuery:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Вызываем скрипт:

/// wrap inner content of each anchor with first layer and append background layer
$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );
 
// loop each anchor and add copy of text content
$("#menu li a").each(function() {
 $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
});
 
$("#menu li a").hover(function() {
 // this function is fired when the mouse is moved over
 $(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
 $(".over", this).stop().animate({'top': '0px'},  250); // move down - show
 $(".bg", this).stop().animate({'top': '0px'},  130); // move down - show
 
}, function() {
 // this function is fired when the mouse is moved off
 $(".out", this).stop().animate({'top': '0px'},  250); // move up - show
 $(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
 $(".bg", this).stop().animate({'top': '-45px'}, 130); // move up - hide
});
Скачать 882Загрузок 1,93 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи