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


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


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

В шапке подключаем необходимые файлы (есть в архиве):
<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


скрипт скрипт МЕНЮ С АНИМАЦИЕЙ ФОНА КНОПКИ
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация