今天下午写了这个nav菜单插件，点击下载,特记之
用法讲解(example):
1 $("div.header").Nav({ 2 /**主菜单选项**/ 3 number : 5, //主菜单数量 4 NavText : ['首页','简介','我的信息','我的博客','关注'], //主菜单名参数 5 NavHref : ['?m1','?m2','?m3','?m4'], //主菜单链接,务必和菜单选项保持一致 6 NavWidth : 100, //主菜单宽度 7 /**子菜单选项**/ 8 sonNav : true, //是否设置子菜单 9 sonText : { //子菜单参数10 首页 : ['首页一','首页二','首页三'],11 简介 : ['sonmenu2','sonmenu2'],12 我的信息 : ['sonmenu5','sonmenu5','sonmenu5','sonmenu5'],13 我的博客 : ['sonmenu4'],14 关注 : ['sonmenu3','sonmenu3','sonmenu3','sonmenu3']15 },16 sonNavHref : { //子菜单链接,务必和菜单选项保持一致17 首页 : ['?1'],18 简介 : ['?2'],19 我的信息 : ['?3'],20 我的博客 : ['?4'],21 关注 : ['?5']22 }, 23 sonNavWidth : 100 //子菜单宽度24 });Html:
1 <div class="header"></div>CSS:(base.css这里不发了，都参照图片切换那个，下面的是菜单插件的css)
1 nav{position:relative; margin-left:-3px;}2 nav li{position:relative; display:inline-block; text-align:center; text-decoration:none; background: #000; color:#fff; margin-left:3px;}3 nav li a{background:#000; color:#fff; display:block; padding:8px 0; width:100px;}4 nav p{position:absolute; left:0px; top:30px; padding-top:1px; z-index:100; display:none;}5 nav p a{display:block; padding:8px 0; width:100px; text-align:center; text-decoration:none; background: #000; color:#fff;}6 nav li p a:hover{background:#444;}jQuery插件代码：
1 //Nav插件 2 (function(){ 3 $.fn.Nav = function(options){ 4 var _this = this; 5 var defaults = { 6 number : 4, 7 NavText : ['menu1','menu2','menu3','menu4'], 8 NavHref : ['#1','#2','#3','#4'], 9 sonNav : true, 10 sonText : { 11 menu1 : ['sonmenu1'], 12 menu2 : ['sonmenu2'], 13 menu3 : ['sonmenu3'], 14 menu4 : ['sonmenu4'] 15 }, 16 sonNavHref : { 17 menu1 : ['#1'], 18 menu2 : ['#2'], 19 menu3 : ['#3'], 20 menu4 : ['#4'] 21 }, 22 NavWidth : 100, 23 sonNavWidth : 100 24 } 25 var opts = $.extend(defaults,options); 26 27 var nav = '<nav><ul></ul></nav>'; 28 29 _this.html(nav); 30 31 32 //导入主菜单 33 var menu = [], 34 menuHref = [], 35 navA = ''; 36 for(var i = 0; i < opts.number; i++){ 37 menu.push(opts.NavText[i]); 38 menuHref.push(opts.NavHref[i]); 39 var h = menuHref[i]; 40 if(!h){ 41 h = '#'; 42 } 43 navA += '<li class="n' + i + '"><a href="' + h + '">' + menu[i] + '</a></li>'; 44 } 45 $('nav ul').append(navA); 46 47 //设置主菜单宽度 48 $('nav ul li a').css({'width':opts.NavWidth + 'px'}); 49 50 if(opts.sonNav){ 51 //导入子菜单 52 var sonMenuName = [], 53 sonMenuVal = []; 54 $.each(opts.sonText,function(index,value){ 55 sonMenuName.push(index); 56 sonMenuVal.push(value); 57 }); 58 59 //子菜单链接 60 var sonMenuHref = []; 61 $.each(opts.sonNavHref,function(index,value){ 62 sonMenuHref.push(value); 63 }); 64 65 for(var i = 0; i < menu.length; i++){ 66 $.each(sonMenuName,function(index,value){ 67 if(menu[i] == value){ 68 var sonNav = '<p>'; 69 for(var j = 0; j < sonMenuVal[index].length; j++){ 70 var h = sonMenuHref[index][j]; 71 if(!h){ 72 h = '#'; 73 } 74 sonNav += '<a href="' + h + '">' + sonMenuVal[index][j] + '</a>'; 75 } 76 sonNav += '</p>'; 77 $('nav li.n' + i).append(sonNav); 78 } 79 }); 80 } 81 82 //设置子菜单宽度 83 $('nav ul li p a').css({'width':opts.sonNavWidth + 'px'}); 84 85 //子菜单鼠标事件 86 $("nav ul li").find("a").mouseenter(function(e){ 87 e.stopPropagation(); 88 $(this).next().slideDown('fast'); 89 }); 90 $("nav ul li").mouseleave(function(){ 91 $(this).find("p").slideUp('fast'); 92 }); 93 94 } 95 96 97 98 99 }100 })(jQuery);最后总结：本想做两种效果的，即下拉子菜单是垂直下来和横排过去的两种，通过参数可以任由用户选择，中间出了点叉子，就没做进去，现在只有垂直下拉一种模式
转载于:https://www.cnblogs.com/zhupinglei/archive/2012/03/09/2387717.html
相关资源：Dropdown Menu 动感多级导航菜单jQuery插件版