日期:2014-05-16  浏览次数:20411 次

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_