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

Меню - "сюрприз"


Меню под названием "сюрприз" с эффектами easing. Простенько исимпатично. Реализовано на jQuery и CSS3.  

HTML

Простенькая разметочка. Опять используем для навигации неупорядоченный список:

CSS

JS

Подключаем jQuery, easing и backgroundPosition. И добавляем код вызова для меню:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/jаvascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/jаvascript">
$(function(){
    $('#nav li a')
        .css( {backgroundPosition: "52px -240px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){
                $(this).css({backgroundPosition: "52px -240px"})
            }})
        })
        
});
</script>

Анимация в данном примере (скрипт взят из Демо 1) использует эффекты easeOutElastic и easeOutCubic. Эти значения можно поменять на другие, которые поддерживает плагин easing - http://gsgd.co.uk/sandbox/jquery/easing/

Скачать 644Загрузок 13,13 Kb
Демо

Комментарии

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

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