codice:
<script type="text/javascript">
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* it has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like innitially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});
</script>
Penso che il punto incriminato sia questo:
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
Come posso selezionare il secondo li ???