<div id="menuWrapper" class="menuWrapper bg1">
<ul class="menu" id="menu">
<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">Экипаж</a>
<ul class="sub1" style="background-position:0 0;">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-199px 0px;">
<a id="bg2" href="#">Вооружение</a>
<ul class="sub2" style="background-position:-199px 0;">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-398px 0px;">
<a id="bg3" href="#">Связь</a>
<ul class="sub3" style="background-position:-398px 0;">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
<li class="last bg1" style="background-position:-597px 0px;">
<a id="bg4" href="#">Здоровье</a>
<ul class="sub3" style="background-position:-597px 0;">
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
</ul>
</li>
</ul>
</div>
<!-- JavaScript -->
<script type="text/javascript" src="http://www.stratics.aop.ua/GM/src/demo/jquery-1.5.2.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.bgpos.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script type="text/javascript">
$(function() {
/* позиция элемента <li>, который выводится в текущий момент */
var current = 0;
var loaded = 0;
for(var i = 1; i <5; ++i)
$('<img />').load(function(){
++loaded;
if(loaded == 3){
$('#bg1,#bg2,#bg3,#bg4').mouseover(function(e){
var $this = $(this);
/* если курсор мыши находится над текущим элементом, то ничего делать не надо */
if($this.parent().index() == current)
return;
/* item - это bg1 или bg2 или bg3, в зависимости от того, где находится курсор мыши */
var item = e.target.id;
/*Это слой подменю. Будем скрывать текущий слой,
если курсор поместили над первым элементом <li> или
сделан переход с последнего элемента,
затем слой должен сдвинуться слева->направо,
или справа->налево в другом случае */
if(item == 'bg1' || current == 2)
$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-199px 0)"},597,function(){
$(this).find('li').hide();
});
else
$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(199px 0)"},597,function(){
$(this).find('li').hide();
});
if(item == 'bg1' || current == 3){
/* если курсор мыши поместили над первым элементом <li> или произвели перевод с последнего элемента,
то изображение должно сдвинуться слева->направо */
$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(item);
move(1,item);
}
else{
/* в другом случае изображение должно переместиться справа->налево */
$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(item);
move(0,item);
}
/*При переходе от первого элемента меню к последнему (без активации среднего элемента), или при переходе от последнего к первому, средний слой меню тоже должен проскальзывать либо слева->направо, либо справа->налево */
if(current == 2 && item == 'bg1'){
$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-199px 0)"},597);
}
if(current == 0 && item == 'bg4'){
$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(199px 0)"},597);
}
/* Изменяем текущий элемент */
current = $this.parent().index();
/* Теперь появляется слой текущего элемента */
$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},597,function(){
$(this).find('li').fadeIn();
});
});
}
}).attr('src', 'images/'+i+'.jpg');
/*
dir:1 - перемещение слева->направо
dir:0 - перемещение справа->налево
*/
function move(dir,item){
if(dir){
$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},199);
$('#bg2').parent().stop().animate({backgroundPosition:"(-199px 0)"},398);
$('#bg3').parent().stop().animate({backgroundPosition:"(-398px 0)"},597);
$('#bg4').parent().stop().animate({backgroundPosition:"(-597px 0)"},797,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3 bg4').addClass(item);
});
}
else{
$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},797,function(){
$('#menuWrapper').removeClass('bg1 bg2 bg3 bg4').addClass(item);
});
$('#bg2').parent().stop().animate({backgroundPosition:"(-199px 0)"},597);
$('#bg3').parent().stop().animate({backgroundPosition:"(-398px 0)"},398);
$('#bg4').parent().stop().animate({backgroundPosition:"(-597px 0)"},199);
}
}
});
</script>
