I need to make a lava menu style menu but instead of the blob shown in nettuts+ I'm trying to get a custom pointer to move horizontally (animated) when the cursor hovers over the <li>
elements.
I'm unable to get the pointer at the end of the <li>
list.
Also will the pointer still work if I use only a single page and just change the content dynamically using Jquery ajax, instead of having separate pages for different <li>
?
//lava menu nav
(function($){
$.fn.lava= function(options){
options= $.extend({
speed: 500,
easing: 'easeInOut',
reset: 0
}, options);
return this.each(function(){
var nav = $(this),
currentPageItem = ("#selected", nav),
pointer,
reset;
var itemPosition= currentPageItem.position().left;
var lavaOffset= currentPageItem.outerWidth() / 2;
$('<li><img id="pointer" src="images/lava.png"></li>').css({
left: itemPosition+lavaOffset
}).appendTo(this);
pointer= ("#pointer", nav) <!--declare the pointer variable-->
<!--listen for the hover event-->
$("li:not(#pointer)", nav).hover(function(){
clearTimeout(reset);
var newItemPosition= $(this).position().left;
var newLavaOffset= $(this).outerWidth() / 2;
<!--when the mouse hovers-->
pointer.animate(
{
left: newItemPosition + newLavaOffset
},
{
duration: options.speed,
easing: options.easing,
queue: false
}
);
}, function(){
<!-- now the mouse is leaving.. so we are using a callback for removing the animated pointer-->
reset= setTimeout(function(){
pointer.animate({
left: itemPosition+lavaOffset
}, options.reset)
}, options.reset);
});
}); <!--end each here-->
};<!--end prototype function here-->
})(jQuery);