js實現左側無限級菜單

以前在網上搜到很多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>

• 無限級菜單.zip (63.3 KB)
• 下載次數: 33