Смею предположить, что наши читатели достаточно подкованы в HTML и CSS.
Код HTML:
<div class="container">
<div id="navbar1">
<ul id="sprite">
<li id="b0" class="a0">Home</li>
<li id="b1">News</li>
<li id="b2">Blog</li>
<li id="b3">Pictures</li>
<li id="b4">Videos</li>
<li id="b5">Gallery</li>
<li id="b6">About</li>
<li id="b7" style="border-right:1px solid #1f1f1f;">Contact</li>
</ul>
</div>
</div>
Код CSS:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
width:960px;
margin:0px auto;
color:#FFFFFF;
font-family:Arial,sans-serif;
font-size:20px;
font-weight:bold;
}
#navbar1{
float:left;
width:960px;
height:36px;
font-size:14px;
margin:20px 0 0 0;
background:url(images/navbar_bg.png);
}
#navbar1 ul{
float:left;
width:585px;
height:36px;
margin-left:188px;
color:#000000;
}
#navbar1 ul{
background: url(images/anim_3.png) no-repeat;
background-position:1px 4px;
}
#navbar1 ul li{
float:left;
width:72px;
margin:3px 0 0 0;
height:22px;
display: inline;
text-align:center;
padding:7px 0 0 0;
border-left:1px solid #1f1f1f;
cursor:pointer;
}
*Заметка: Данная статья хорошо подойдет в тех случаях, когда у вас уже есть заранее обозначенная ширина каждой кнопки или элемента списка, как показано на изображении выше. Можно это использовать также и в навигациях с динамичной шириной, но вам придется менять jQuery, и само изображение, дабы достичь нужной консистенции в дизайне. Для того, чтобы объяснить вам основную суть того, как мы собираемся анимировать навигационную строку, мы возьмем фоновое изображение, равное по ширине пункту меню. Оно будет размещаться с левой стороны каждого пункта при наведении курсора. Итак, как вы видите в коде HTML, я присвоил имя (id) своему списку имя «sprite» с фоновым изображением. Я также дал имена пунктам в меню b0, b1, b2, b3 и так далее, опираясь на очередность отображения пунктов. Я объясню, для чего мы это делаем, после того, как вы взглянете на код jQuery.
Код jQuery:
$(document).ready(function(){
var selected=0; // Default background position
var position=0;
$("#sprite").css({backgroundPosition:''+selected+'px 4px'});
$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
/*width of your list item*/
$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
});
$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
});
});
Шаг за шагом прочтите это:
* В первой строке вы указываете расположение фонового изображения, которое входит в спрайт (#sprite). Даже несмотря на то, что мы уже указали стандартное фоновое изображение в CSS-файле, нам все равно приходится указывать стандартные изображения в jQuery. Это делается только из-за того, что Internet Explorer отображает ошибку после повторного наведения курсора мыши.
* Теперь, при наведении курсора на любой из пунктов меню, мы просто просчитываем фоновое расположение изображения в фоне спрайта, и применив метод анимации в jQuery, передвигаем его в указанное место. Например: При наведении на b0, в нашем случае мы передвигаем его 0 * 73 (ширина заданной кнопки), т.е. 0 пикселей от левого спрайта. При наведении мыши на b1, мы передвигает его 1 * 73, т.е., 73 пикселя от левого спрайта. При наведении на b2, передвигаем его на 2 * 73, т.е., 146 пикселей от левого спрайта, и так далее. Именно поэтому мы переименовали пункты меню в b0, b1, b2… чтобы можно было делить их цифровые значения.
* Когда курсор выходит из поля навигационного меню, изображение вновь возвращается на исходную позицию, т.е. 0 пикселей (var selected;) слева и 4 пикселя сверху.
* Теперь, если у вас уже есть то, о чем мы вам рассказывали, то у вас, вероятно, может возникнуть один вопрос, о том, должны ли вы вручную задавать значения переменной «selected» для каждой страницы. Во избежание данных повторений, вам просто нужно отредактировать код jQuery, предоставленный выше, на вот этот.
<script type="text/javascript">
$(document).ready(function(){
var check;
var i;
for(i=0;i<20;i++){
if($(".a"+i+"").attr("id")){
check=$(".a"+i+"").attr("id").slice(1,2);
}
}
var selected=check*($("#b0").outerWidth());
var position;
$("#sprite").css({backgroundPosition:''+selected+'px 4px'});
$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
position=$(this).attr("id").slice(1,2)*($("#b0").outerWidth());/*width of your list item*/
$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:300});
});
$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:300});
});
});
</script>
Теперь мы можем просто называть класс а0, или а1, или а2, или а4 из нашего списка (активный пункт меню) для того, чтобы в HTML установить исходную позицию фонового изображения в спрайте, а скрипт будет искать класс с префиксом «а», а затем переходить к следующим элементам, т.е. 0 или 1 или 2 или 3, и так далее. А затем будет умножать ее на ширину элементов, и задавать исходную позицию слева.
Не стесняйтесь комментировать статью, если она вам понравилась, или возможно у вас возникли какие-то проблемы в процессе применения методов, описанных в ней.
Спасибо за внимание.
Скачать рабочий пример и исходный код: