jquery 无限级下拉菜单
本例子使用json数据,拼接ul和li来实现的
效果图:
1.准备json数据:
View Code
1 var menuData = [ 2 {id:0,pid:-1,name:"订购产品",url:"",children:[ 3 {id:1,pid:0,name:"电脑配件",url:"http://www.baidu.com",children:[ 4 {id:20,pid:1,name:"cpu",url:"http://www.baidu.com",children:[ 5 {id:30,pid:20,name:"Intel",url:"http://www.baidu.com",children:[ 6 {id:3000,pid:30,name:"Intel 01",url:""}, 7 {id:3001,pid:30,name:"Intel 02",url:""}, 8 {id:3002,pid:30,name:"Intel 03",url:""}, 9 {id:3003,pid:30,name:"Intel 04",url:""}, 10 {id:3004,pid:30,name:"Intel 05",url:""}, 11 {id:3005,pid:30,name:"Intel 06",url:""}, 12 {id:3006,pid:30,name:"Intel 07",url:""}, 13 {id:3007,pid:30,name:"Intel 08",url:""}, 14 {id:3008,pid:30,name:"Intel 09",url:""} 15 ]}, 16 {id:31,pid:20,name:"AMD",url:"http://www.baidu.com",children:[ 17 {id:3100,pid:31,name:"AMD 01",url:""}, 18 {id:3101,pid:31,name:"AMD 02",url:""}, 19 {id:3102,pid:31,name:"AMD 03",url:""}, 20 {id:3103,pid:31,name:"AMD 04",url:""}, 21 {id:3104,pid:31,name:"AMD 05",url:""}, 22 {id:3105,pid:31,name:"AMD 06",url:""}, 23 {id:3106,pid:31,name:"AMD 07",url:""}, 24 {id:3107,pid:31,name:"AMD 08",url:""}, 25 {id:3108,pid:31,name:"AMD 09",url:""} 26 ]} 27 ]}, 28 {id:21,pid:1,name:"内存",url:"http://www.baidu.com"}, 29 {id:22,pid:1,name:"硬盘",url:"http://www.baidu.com"}, 30 {id:23,pid:1,name:"主板",url:"http://www.baidu.com"}, 31 {id:24,pid:1,name:"显卡",url:"http://www.baidu.com"}, 32 {id:25,pid:1,name:"显示器",url:"http://www.baidu.com"}, 33 {id:26,pid:1,name:"主机箱",url:"http://www.baidu.com"}, 34 {id:27,pid:1,name:"主机箱电源",url:"http://www.baidu.com"}, 35 {id:28,pid:1,name:"键鼠(有线)",url:"http://www.baidu.com"}, 36 {id:29,pid:1,name:"键鼠(无线)",url:"http://www.baidu.com"} 37 ],url:"http://www.baidu.com"}, 38 {id:101,pid:0,name:"监控器材",children:[ 39 {id:102,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 40 {id:103,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 41 {id:104,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 42 {id:112,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 43 {id:113,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 44 {id:114,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 45 {id:115,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 46 {id:116,pid:101,name:"摄像头",url:"http://www.baidu.com"}, 47 {id:117,pid:101,name:"摄像头",url:"http://www.baidu.com"} 48 ],url:"http://www.baidu.com"}, 49 {id:201,pid:0,name:"数码产品",children:[ 50 {id:202,pid:201,name:"摄像头",url:"http://www.baidu.com"} 51 ],url:"http://www.baidu.com"}, 52 {id:301,pid:0,name:"网络产品",children:[ 53 {id:302,pid:301,name:"摄像头",url:"http://www.baidu.com"} 54 ],url:"http://www.baidu.com"}, 55 {id:401,pid:0,name:"打印耗材",children:[ 56 {id:402,pid:401,name:"打印机",url:"http://www.baidu.com"}, 57 {id:403,pid:401,name:"油墨",url:"http://www.baidu.com"}, 58 {id:404,pid:401,name:"纸张",url:"http://www.baidu.com"}, 59 {id:405,pid:401,name:"摄像头",url:"http://www.baidu.com"}, 60 {id:406,pid:401,name:"摄像头",url:"http://www.baidu.com"}, 61 {id:407,pid:401,name:"摄像头",url:"http://www.baidu.com"}, 62 {id:408,pid:401,name:"摄像头",url:"http://www.baidu.com"} 63 ],url:"http://www.baidu.com"} 64 ]}, 65 {id:1000,pid:-1,name:"我的订单",url:"",children:[ 66 {id:1001,pid:1000,name:"已过期订单",url:""}, 67 {id:1001,pid:1000,name:"已付款订单",url:""} 68 ]}, 69 {id:2000,pid:-1,name:"公司信息",url:"",children:[ 70 {id:2001,pid:2000,name:"最新新闻",url:""}, 71 {id:2002,pid:2000,name:"公司地址",url:""} 72 ]} 73 ];
2.html代码:
<div id="menu"><ul id="baseMenu"></ul></div>
3.解析json数据(plugin-menu.js文件):刚学会写jquery插件,写的还比较乱,凑合着看吧
View Code
1 (function($){ 2 $.fn.extend({ 3 menu:function(options){ 4 var defaults = { 5 data:[], 6 ulId:"baseMenu" 7 }; 8 var options = $.extend(defaults, options); 9 // 开始拼接ul,li 10 $.each(options.data,function(i,v){ 11 var li = $("<li id='"+options.data[i].id+"' name='"+options.data[i].pid+"'></li>"); 12 var _a = $("<a>"+options.data[i].name+"</a>"); 13 _a.attr("href",options.data[i].url) 14 .appendTo(li); 15 16 _each(options.data[i],li); 17 li.appendTo($("#"+options.ulId)); 18 }); 19 // 给li添加事件 20 $(this).find("li").hover(function(){ 21 var id = $(this).attr("id"); 22 $(this).find("ul[name='"+id+"']").show(); 23 },function(){ 24 var id = $(this).attr("id"); 25 $(this).find("ul[name='"+id+"']").hide(); 26 }); 27 } 28 }); 29 })(jQuery);
因为支持无限级,所以肯定会用到递归方法:
View Code
1 function _each(data,li){ 2 if(data==undefined||data.children==undefined){ 3 return false; 4 } 5 var ul = $("<ul name='"+data.id+"' style='display:none;'></ul>"); 6 7 $.each(data.children,function(i,v){ 8 var _li = $("<li id='"+data.children[i].id+"' name='"+data.children[i].pid+"'></li>"); 9 var _a = $("<a>"+data.children[i].name+"</a>"); 10 _a.attr("href",data.children[i].url) 11 .attr("target","_blank") 12 .appendTo(_li); 13 14 if(data.children[i].children!=undefined){ 15 _each(data.children[i],_li); 16 } 17 _li.appendTo(ul); 18 }); 19 ul.appendTo(li); 20 }
4.调用插件:
$(function() { $("#menu").menu({data:menuData,ulId:"baseMenu"}); });
最后,css样式:
ul,li{list-style:none;padding:0px;margin:0px;} #menu *{line-height:30px;} #menu a{text-decoration:none;} #menu ul{text-align:left;} #menu>ul>li{text-align:center;width:80px;float:left;} #menu>ul>li>a{color:#000;} #menu>ul>li:hover{background:#F0F0F0;} #menu>ul>li ul{display:none;width:150px;position:absolute;background:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px 2px #123;} #menu>ul>li>ul li{padding-left:5px; position:relative;} #menu>ul>li>ul li>a{color:#000;} #menu>ul>li>ul li:hover{background:#d3dbb3;} #menu>ul>li>ul>li ul{left:150px; top:0px;}
