熔岩风格的菜单 - 最后没有附加李

Question

我需要制作一个熔岩菜单样式菜单，但不是nettuts中显示的blob +我试图获得一个自定义指针，当光标悬停在<li>元素上时，水平移动（动画）。

我无法将指针放在<li>列表的末尾。

如果我只使用一个页面并且只是使用Jquery ajax动态更改内容，而不是为不同的<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);