1

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);
4

0 回答 0