МЕНЮ С АНИМАЦИЕЙ ФОНА КНОПКИ

МЕНЮ С АНИМАЦИЕЙ ФОНА КНОПКИ


Вид меню с различными эффектами анимации фона. Смена фона происходит, либо как слайд - справа налево, сверху вниз, либо происходит плавное изменение цвета.

В шапке подключаем необходимые файлы (есть в архиве):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="anmenu.js"></script>


Разметка HTML
Простой не упорядоченный список:
<ul id="noscript">
    <li><a href="">Главная</a></li>
    <li><a href="">О нас</a></li>
    <li><a href="">Портфолио</a></li>
    <li><a href="">Контакты</a></li>
</ul>


CSS
Основной CSS. Ни чего сверх оригинального. float: left и display:block вот и все.
ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    float:left;
    width:100px;
    margin:0;
    padding:0;
    text-align:center;
}
li a {
    display:block;
    padding:5px 10px;
    height:100%;
    color:#FFF;
    text-decoration:none;
    border-right:1px solid #FFF;
}
li a {
    background:url(bg.jpg) repeat 0 0;
}
li a:hover {
    background-position:50px 0;
}


МЕНЮ С АНИМАЦИЕЙ ФОНА КНОПКИ


С помощью такой вот картинки, по сути левая часть - до наведения курсора, правая - при наведении, можно получить интересный эффект добавив лишь простой наклон.

МЕНЮ С АНИМАЦИЕЙ ФОНА КНОПКИ


А для эффекта FADE используется более сложный рисунок. Градиент позволяет как раз плавно осущетсвлять изменение цвета кнопки.

javascript
И наконец, скрипт заставляющий работать анимацию.
$('#nav a').css( {backgroundPosition: "0 0"} ).mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -250px)"}, 
        {duration:500})
})
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
    {duration:500})
})


Скачать исходник:
Скачать файл: menu_animation_bg.rar [8,27 Kb] (cкачиваний: 3)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.