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

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

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 в коде ниже, а более подробно смотрите в демо.

.menu ul li a span {
 /* все слои будут абсолютно спозиционированы */
 position: absolute;
 left: 0;
 width: 110px;
}
 
.menu ul li a span.out {
 top: 0px;
}
 
.menu ul li a span.over,
.menu ul li a span.bg {
 /* Скрыть */  
 top: -45px;
}
 
#menu {
 background: #EEE;
}
 
#menu ul li a span {
 color: #000;
}
 
#menu ul li a span.over {
 color: #FFF;
}
 
#menu ul li span.bg {
 /* Высота пунктов меню */  
 height: 45px;
 background: url('bg_over.gif') center center no-repeat;
}

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