Jquery實現無限級別導航菜單插件

Jquery實現無限級別導航菜單插件是一款功能很功能且很實用的插件，做網站不可缺少的神兵利器之一，剛好最近有位上海的網友留言需要一個3級的導航菜單，為了滿足更多網友的需求，漫畫就去收集了此插件，有了它之后你想導航菜單有多少子菜單都可以，使用超簡單，引入插件之后，寫一句初始化腳就可以實現了，講了這么多，網友們都流口水了吧，先看效果

效果如下：

插件代碼如下：

;(function($){ // $ will refer to jQuery within this closure

    $.fn.supersubs = function(options){
        var opts = $.extend({}, $.fn.supersubs.defaults, options);
        // return original object to support chaining
        return this.each(function() {
            // cache selections
            var $$ = $(this);
            // support metadata
            var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
            // get the font size of menu.
            // .css('fontSize') returns various results cross-browser, so measure an em dash instead
            var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
                'padding' : 0,
                'position' : 'absolute',
                'top' : '-999em',
                'width' : 'auto'
            }).appendTo($$).width(); //clientWidth is faster, but was incorrect here
            // remove em dash
            $('#menu-fontsize').remove();
            // cache all ul elements
            $ULs = $$.find('ul');
            // loop through each ul in menu
            $ULs.each(function(i) { 
                // cache this ul
                var $ul = $ULs.eq(i);
                // get all (li) children of this ul
                var $LIs = $ul.children();
                // get all anchor grand-children
                var $As = $LIs.children('a');
                // force content to one line and save current float property
                var liFloat = $LIs.css('white-space','nowrap').css('float');
                // remove width restrictions and floats so elements remain vertically stacked
                var emWidth = $ul.add($LIs).add($As).css({
                    'float' : 'none',
                    'width' : 'auto'
                })
                // this ul will now be shrink-wrapped to longest li due to position:absolute
                // so save its width as ems. Clientwidth is 2 times faster than .width() - thanks Dan Switzer
                .end().end()[0].clientWidth / fontsize;
                // add more width to ensure lines don't turn over at certain sizes in various browsers
                emWidth += o.extraWidth;
                // restrict to at least minWidth and at most maxWidth
                if (emWidth > o.maxWidth)        { emWidth = o.maxWidth; }
                else if (emWidth < o.minWidth)   { emWidth = o.minWidth; }
                emWidth += 'em';
                // set ul to width in ems
                $ul.css('width',emWidth);
                // restore li floats to avoid IE bugs
                // set li width to full width of this ul
                // revert white-space to normal
                $LIs.css({
                    'float' : liFloat,
                    'width' : '100%',
                    'white-space' : 'normal'
                })
                // update offset position of descendant ul to reflect new width of parent
                .each(function(){
                    var $childUl = $('>ul',this);
                    var offsetDirection = $childUl.css('left')!==undefined ? 'left' : 'right';
                    $childUl.css(offsetDirection,emWidth);
                });
            });

        });
    };
    // expose defaults
    $.fn.supersubs.defaults = {
        minWidth        : 9,        // requires em unit.
        maxWidth        : 25,       // requires em unit.
        extraWidth      : 0         // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
    };

})(jQuery);

項目主頁：http://www.baiduhome.net/lib/view/home/1344491801139