js实现左侧无限级菜单
2013-11-25 16:05
253 查看
以前在网上搜到很多js写的菜单,但是都是在静态页面中写死了。最近写了一个通过json数组来生成的菜单(兼容ie6,7,8;ff);代码如下:
无限级菜单.zip (63.3 KB)
下载次数: 33
//菜单内容json数组 //数据结构【fatherid:当前节点的父节点】【name:要显示的名字】【link:当前菜单的链接地址】【id:当前节点的id】 var menu_ary = [ {'fatherid':'0','name':'湖南','link':'http://www.a.com','id':'1'}, {'fatherid':'0','name':'湖南','link':'http://www.a.com','id':'2'}, {'fatherid':'0','name':'湖南','link':'http://www.a.com','id':'3'}, {'fatherid':'2','name':'湖南','link':'http://www.a.com','id':'4'}, {'fatherid':'2','name':'湖南','link':'http://www.a.com','id':'5'}, {'fatherid':'2','name':'湖南','link':'http://www.a.com','id':'6'}, {'fatherid':'3','name':'湖南','link':'http://www.a.com','id':'7'}, {'fatherid':'5','name':'湖南','link':'http://www.a.com','id':'8'}, {'fatherid':'5','name':'湖南','link':'http://www.a.com','id':'9'}, {'fatherid':'6','name':'湖南','link':'http://www.a.com','id':'10'}, {'fatherid':'6','name':'湖南','link':'http://www.a.com','id':'11'}, {'fatherid':'8','name':'湖南','link':'http://www.a.com','id':'12'}, {'fatherid':'8','name':'湖南','link':'http://www.a.com','id':'13'}, {'fatherid':'10','name':'湖南','link':'http://www.a.com','id':'14'}, {'fatherid':'11','name':'湖南','link':'http://www.a.com','id':'15'} ]; //判断是否为IE6,77 var ie_version = "class"; if(navigator.appName == "Microsoft Internet Explorer") { if(navigator.appVersion.match(/7./i)=='7.' || navigator.appVersion.match(/6./i)=='6.')ie_version = "className";else ie_version = "class"; } //隐显记录器 var p = new Array(); p[0]=0;p[1]=0;p[2]=0; var n = new Array(); n[0]=0;n[1]=0;n[2]=0; //移出触发器 var key_all=0; //创建根节点 function create_root_node(){ var menu_area = document.createElement('div'); menu_area.setAttribute(ie_version, 'menu_root_area'); menu_area.style.position = 'absolute'; menu_area.style.left = 20 + 'px'; menu_area.style.top = 20 + 'px'; menu_area.setAttribute('id','f0'); for(var i=0;i<menu_ary.length;i++){ //遍历数组 if(menu_ary[i].fatherid=='0'){ var menuItems = document.createElement('div'); var t=0; for(var j=0;j<menu_ary.length;j++){ if (menu_ary[j].fatherid==menu_ary[i].id) {t=1; break;}} if (t==1) menuItems.setAttribute(ie_version, 'menu_root_info_child'); else menuItems.setAttribute(ie_version, 'menu_root_info_no_child'); menuItems.setAttribute('id','c'+menu_ary[i].id); menuItems.onmouseover = function(){ on_mouse_over(this);} menuItems.onmouseout = function(){ on_mouse_out();} var menuLink = document.createElement('a'); menuLink.setAttribute(ie_version, 'menu_link_text'); menuLink.href = menu_ary[i].link; menuLink.innerHTML = menu_ary[i].name; menuItems.appendChild(menuLink); menu_area.appendChild(menuItems); } } document.getElementById("left_menu").appendChild(menu_area); pf=-1; pc=0; } //创建子节点 function create_child_node(id){ if (id==null) return false; for(var j=0;j<menu_ary.length;j++){ if (menu_ary[j].fatherid==id) {nf=menu_ary[j].fatherid; break;}} if (j==menu_ary.length) return false; else p_child=1; var father_id = 'c'+id; var father_obj = document.getElementById(father_id); var father_left = father_obj.parentNode.offsetLeft; var father_top =father_obj.parentNode.offsetTop + father_obj.offsetTop; var father_width = father_obj.offsetWidth; var child_area = document.createElement('div'); //创建一列的div child_area.setAttribute(ie_version, 'menu_child_area'); child_area.style.position = 'absolute'; child_area.style.left = father_left + father_width + 1 + 'px'; child_area.style.top = (father_top) - 1 + 'px'; child_area.setAttribute('id','f' + id); child_area.onmouseout = function(){ on_mouse_out();} for (var i = 0; i < menu_ary.length; i++) { if (id == menu_ary[i].fatherid) { //他就是当前鼠标经过的孩子 var childMenuItems = document.createElement('div'); // 创建每个菜单div var t=0; for(var j=0;j<menu_ary.length;j++){ if (menu_ary[j].fatherid==menu_ary[i].id) {t=1; break;}} if (t==1) childMenuItems.setAttribute(ie_version, 'menu_child_info_child'); else childMenuItems.setAttribute(ie_version, 'menu_child_info_no_child'); childMenuItems.setAttribute('id', 'c' + menu_ary[i].id); childMenuItems.onmouseover = function(){ on_mouse_over(this);} child_area.onmouseout = function(){ on_mouse_out(this); } var a = document.createElement('a'); a.setAttribute(ie_version, 'menu_link_text'); a.href = menu_ary[i].link; a.innerHTML = menu_ary[i].name; childMenuItems.appendChild(a); child_area.appendChild(childMenuItems); document.body.appendChild(child_area); } } } //销毁全部次级菜单 function hide_node_all() {if (key_all==1) {$('.menu_child_area').remove(); p[0]=0;p[1]=0;p[2]=0; n[0]=0;n[1]=0;n[2]=0; } } //隐藏结点 function hide_node(id){var node_area = document.getElementById('f'+id);document.body.removeChild(node_area);} //鼠标置上 function on_mouse_over(obj){ key_all=0; id = obj.id.substring(1); n[1] =id; //找到公用父节点 for(var i=0;i<menu_ary.length;i++){ if (menu_ary[i].id==id) {n[0]=menu_ary[i].fatherid; break;}} //找到有误子节点 for(var j=0;j<menu_ary.length;j++){ if (menu_ary[j].fatherid==n[1]) break;} if (j==menu_ary.length) n[2]=0; else n[2]=1; //自移 if (n[0]==p[0] && n[1]==p[1] && n[2]==p[2]) return false; //平移操作 if (n[0]==p[0] && n[1]!=p[1]) { if (p[2]==1) hide_node(p[1]); create_child_node(n[1]); p[0]=n[0]; p[1]=n[1]; p[2]=n[2]; return false;} //下移操作 if (n[0]==p[1]) { create_child_node(n[1]); p[0]=n[0]; p[1]=n[1]; p[2]=n[2]; return false;} //自回移操作 if (n[1]==p[0]) { if (p[2]==1) hide_node(p[1]); p[0]=n[0]; p[1]=n[1]; p[2]=n[2]; return false;} //跨回移操作 if (n[1]!=p[0]) { if (p[2]==1) {hide_node(p[1]);} hide_node(p[0]); create_child_node(n[1]); p[0]=n[0]; p[1]=n[1]; p[2]=n[2]; return false;} } //鼠标移开 function on_mouse_out(){//hide_node_all(); key_all=1; setTimeout("hide_node_all()",500); }Html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无限级菜单</title> <style type='text/css'> .menu_root_area { width:192px; border:1px solid #33a466; border-bottom:none;} .menu_root_info_child { width:100%; height:42px; line-height:42px; background-image:url(images/menu_bg_01.jpg); background-repeat:no-repeat; text-align:center; border-bottom:1px solid #47bd9a; cursor:hand;} .menu_root_info_no_child { width:100%; height:42px; line-height:42px; background-image:url(images/menu_bg_02.jpg); text-align:center; border-bottom:1px solid #47bd9a; cursor:hand;} .menu_root_info_on_mouse { width:100%; height:42px; line-height:26px; background-color:#DDFBB5; text-align:center; border-bottom:1px solid #47bd9a; cursor:hand;} .menu_child_area { width:160px; border:1px solid #33a466; border-bottom:none;} .menu_child_info_child { width:100%; height:30px; line-height:30px; background-color:#E7FED8; background-image:url(images/have_child_02.gif); background-repeat:no-repeat; background-position:left; text-align:center; border-bottom:1px solid #47bd9a; cursor:hand;} .menu_child_info_no_child { width:100%; height:30px; line-height:30px; text-align:center; border-bottom:1px solid #47bd9a; background-color:#E7FED8; cursor:hand;} .menu_child_info_link_on_mouse { width:100%; height:30px; line-height:30px; background-color:#FFFF66; text-align:center; border-bottom:1px solid #47bd9a; cursor:hand;} .menu_link_text { font-size:14px; font-weight:bold; color:#138271; text-decoration:none; display:block;} </style> <script src="js/jquery.js"></script> <script src='js/menu.js'></script> <script type="text/javascript"> //自动执行,根据数据创建菜单 window.onload = function (){create_root_node();} </script> </head> <body> <!--包含的菜单的div--> <div id="left_menu"></div> </body> </html>
无限级菜单.zip (63.3 KB)
下载次数: 33
相关文章推荐
- js实现的四级左侧网站分类菜单实例
- js实现的四级左侧网站分类菜单实例
- CSS+JS实现结构化无限级导航菜单列表(直接调用)
- JS+CSS实现经典的左侧竖向滑动菜单效果
- js实现后管无限级菜单递归一
- JS实现的左侧竖向滑动菜单效果代码
- JS实现的左侧竖向滑动菜单效果代码
- js实现的后台左侧管理菜单代码
- js实现的后台左侧管理菜单代码
- JS实现新浪博客左侧的Blog管理菜单效果代码
- JS实现新浪博客左侧的Blog管理菜单效果代码
- js实现后管无限级菜单递归二
- 原生JS实现仿淘宝网左侧商品分类菜单效果代码
- JS+CSS实现经典的左侧竖向滑动菜单效果
- JS实现浏览器菜单命令
- c#结合js实现无刷新省市联动菜单
- JS仿淘宝左侧菜单
- JS实现的简洁纵向滑动菜单(滑动门)效果
- JS实现浏览器菜单命令
- ASP.NET AJAX无限级JS树形菜单