js实现左侧无限级菜单 -

yuxingxing1988

浏览: 56019 次
性别:
来自: 北京

最近访客更多访客>>

yangger1

lvc2103

yuan0166

我的无奈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js实现左侧无限级菜单

博客分类：

javascript无限级菜单

javascript json

以前在网上搜到很多js写的菜单，但是都是在静态页面中写死了。最近写了一个通过json数组来生成的菜单（兼容ie6,7,8；ff）；代码如下：

//菜单内容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>