| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
dengjianbin
12年前发布

Jquery实现无限级别导航菜单插件

Jquery实现无限级别导航菜单插件是一款功能很功能且很实用的插件,做网站不可缺少的神兵利器之一,刚好最近有位上海的网友留言需要一个3级的导航菜单,为了满足更多网友的需求,漫画就去收集了此插件,有了它之后你想导航菜单有多少子菜单都可以,使用超简单,引入插件之后,写一句初始化脚就可以实现了,讲了这么多,网友们都流口水了吧,先看效果
效果如下:
Jquery插件,Jquery资源,Jquery特效,div+css

插件代码如下:
;(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.open-open.com/lib/view/home/1344491801139

 本文由用户 dengjianbin 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1344491801139.html
jQuery页面导航插件 jQuery插件