Анимированное меню для сайта
В этом уроке показано как можно с помощью JQuery «Оживить» меню на сайте. Для начала посмотрите пример.
Итак, для реализации подобных эффектов на понадобится библиотека JQuery, плагин jquery.bgpos, а также набор картинок. Приступим.
Для начала создаем обычную html-страницу. Для реализации нашего меню мы будем спользовать обычный неупорядоченный список вида:
Теперь давайте немножко «причешем» его, создав стили. Мы не будем сейчас выносить css в одтельный файл, а прямо на странице в тегах <head> пропишем его:
h2 {clear:both;padding-top:20px;}
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(bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#a a {background:url(bg.jpg) repeat -20px 35px;}
#b a {background:url(bg2.jpg) repeat 0 0;}
#c a {background:url(bg3.jpg) repeat 0 0;}
#d a {background:url(bg4.jpg) repeat 0 0;}
Пояснять что здесь к чему мы не будем, обратим лишь внимание на последние 4 строчки. Для каждого вида анимированного меню здесь задается фон разными картинками:
Именно с помощью этих картинок мы будем достигать нужного нам эффекта.
Далее подключим библиотеку JQuery, а также плагин jquery.bgpos:
Теперь можете сохранить страницу и, если вы всё правильно подключили, посмотреть на первый вариант меню. Как видим оно без скриптов и работает обычный css-спрайт, тоесть картинка меняет свою позицию при наведении мышки и из зеленой становится синей.
Теперь давайте сделаем "волну" сверху вниз. Для этого копируем список меню на странице и ставим его ниже, но добавим id="a":
Обратите внимание на строчку #a a {background:url(bg.jpg) repeat -20px 35px;} в наших стилях, она задает фоновую картинку (волнообразное соединение синего и зеленого цветов).
И теперь, после строк, где мы подключали библиотеку и лагин JQuery, подключим еще один ява-скрипт, отвечающий как раз за плавную смену позиций картинки:
$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
});
Здесь снова появляется запись $('#a a'), которая указывает на id нашего меню, а именно "a", а далее идет настройка позиционирования картинки при наведении. Сохраните документ и обновите страницу в браузере - должен получится симпатичный эффект "перетекания" при наведении.
Таким же образом реализуются и остальные примеры. Самое главное что надо уяснить:
#a a {background:url(bg.jpg) repeat -20px 35px;} - этим стилем задается фоновый рисунок;
<ul id="a"> - не забывайте присвоить id к меню;
$('#a a') - эта функция обрабатывает положение фоновой картинки и корость анимации и также имеет id.
