jquery - 获取整个 jquery 导航框以单击

Question

我是一个菜鸟，但我正在尝试构建这个固定在顶部的导航栏，它具有平滑的缓动效果。我找到了一个对我有用的，但整个导航框没有点击。您必须将鼠标悬停在单词上才能导航到下一页。这是我的代码:

(function($) {

$.fn.spasticNav = function(options) {

    options = $.extend({
        overlap : 20,
        speed : 500,
        reset : 1500,
        color : '#0b2b61',
        easing : 'easeOutExpo'
    }, options);

    return this.each(function() {

        var nav = $(this),
            currentPageItem = $('#selected', nav),
            blob,
            reset;

        $('<li. id="blob"></li>').css({
            width : currentPageItem.outerWidth(),
            height : currentPageItem.outerHeight() + options.overlap,
            left : currentPageItem.position().left,
            top : currentPageItem.position().top - options.overlap / 2,
            backgroundColor : options.color
        }).appendTo(this);

        blob = $('#blob', nav);

        $('li:not(#blob)', nav).hover(function() {
            // mouse over
            clearTimeout(reset);
            blob.animate(
                {
                    left : $(this).position().left,
                    width : $(this).width()
                },
                {
                    duration : options.speed,
                    easing : options.easing,
                    queue : false
                }
            );
        }, function() {
            // mouse out    
            reset = setTimeout(function() {
                blob.animate({
                    width : currentPageItem.outerWidth(),
                    left : currentPageItem.position().left
                }, options.speed)
            }, options.reset);

        });

    }); // end each

};

})(jQuery);

现在我到处寻找，我能够找到执行此操作的代码，但我不知道将它放在哪里。下面是代码:这个 youtube 视频完全符合我的要求:youtu( .)be/kzRwMRwKb6o

$("NotSureWhat to put in here").click(function(){ window.location=$(this).find("a").attr("href");返回假； });

如有任何帮助，我们将不胜感激。

好的，这是一个 jfiddle，但它似乎无法正常工作: http://jsfiddle.net/GoodVibeDJs/D2kZw/

附言。这是导航的样子，除了我的是固定的。

http://mauryacravings.com/labs/components/menu/menu_44/JeffreyWay-SpasticNav-68832b9/

Answer 1

除了需要修复很多问题之外，请按照以下说明进行操作。

将此添加到您的#nav li a

padding: 13px 25px 0;
box-sizing: border-box;
height:100%;

并删除 padding-right:50px & top:13px

http://jsfiddle.net/D2kZw/1/