В данном примере мы сохраним все преимущества классической техники использования CSS-спрайтов и добавим к ним анимационных эффектов. Помимо использования CSS для определения внешнего вида элементов в различных состояниях, мы будем использовать JavaScript для создания анимации. Даже если у пользователя будет отключен JavaScript, часть эффектов все равно будет работать (за исключением анимации).
Добавление анимации происходит при помощи создания невидимых элемента поверх пунктов меню и установки положения их фона (CSS-свойство background-position) и изменения этого положения в зависимости от возникновения событий, связанных с перемещением мыши.
Итак, приступим.
Для начала нам понадобится следующая HTML-разметка:
|
1 2 3 4 5 6 |
<ul id="live" class="spritesnav">
<li id="snhome"><a href="#">Home</a></li>
<li id="snabout" class="active"><a href="#">About</a></li>
<li id="snservices"><a href="#">Services</a></li>
<li id="sncontact"><a href="#">Contact</a></li>
</ul> |
И CSS для нее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.spritesnav #snhome a:link,
.spritesnav #snhome a:visited,
.spritesnav #snhome div{
left: 23px;
width: 76px;
}
.spritesnav #snhome a:hover,
.spritesnav #snhome a:focus,
.spritesnav #snhome div{
background: url(blue-nav.gif) no-repeat -23px -49px;
}
.spritesnav #snhome a:active,
.spritesnav #snhome div.click {
background: url(blue-nav.gif) no-repeat -23px -98px;
}
.spritesnav #snhome.active a:link,
.spritesnav #snhome.active a:visited {
background: url(blue-nav.gif) no-repeat -23px -147px;
cursor: default;
} |
Мастер-изображение для наших спрайтов будет таким:
Теперь перейдем к JavaScript.
Используя и , нам понадобиться написать небольшой плагин для jQuery (комментарии к коду прилагаются):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
jQuery.fn.sprites = function(settings) {
settings = jQuery.extend({
allowClick: true,
show: {opacity: 'show'},
hide: {opacity: 'hide'},
active: 'active',
click: 'click'
}, settings);
//добавляем обработчики событий для каждого пункта меню
jQuery(this).children().each(function(){
//но не добавляем к активному
if(!jQuery(this).hasClass(settings.active)){
//убираем фон для состояния :hover, заданный с помощью
jQuery(this).children('a').css({background: "none"});
// При наведении мыши
jQuery(this).hover(function() {
jQuery('
').prependTo(this).animate(settings.show);
//При выходе мыши за пределы пункта меню
},function(){
jQuery(this).children('div').animate(settings.hide, function(){
jQuery(this).children('div').remove();
});
});
//обработчики кликов (если они разрешены с помощью allowClick)
if(settings.allowClick){
// нажатие кнопки мыши
jQuery(this).children('a').mousedown(function(){
jQuery(this).prev().addClass('click');
//ее отпускание
}).mouseup(function(){
jQuery(this).prev().removeClass('click');
});
}
}
});
}; |
И задействовать его уже непосредственно в коде страницы:
|
1 2 3 |
$(document).ready(function(){
$('.spritesnav').sprites();
} |
Вот что у нас должно было получиться.
Напоследок – архив с исходниками.
