软件开发培训班 >> 编程开发 >> JavaScript

无限级别的菜单（侧拉菜单）

　　本文标签：无限级,菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>我的导航菜单_脚本之家</title> 
<style> 
body{ 
font-size:12px 
} 
</style> 
<script language="javascript"> 
//filter:shadow(color=#aaaaaa,direction=135) 
var itemsNum=0; 
var displayFlags = block; 
function menu(menuId,menuWidth,menuHeight,menuTop,menuLeft,itemBranchNum,parentMenuId){ 
this.itemBranchs = new Array(); 
this.width=menuWidth; 
this.height=menuHeight; 
this.top=menuTop; 
this.left=menuLeft; 
this.itemBranchNum=itemBranchNum; 
this.parentMenuId=parentMenuId; 
this.displayFlags = displayFlags; 
//this.parenItemId=parenItemId; 
this.menuId=menuId; 
this.add = addItemBranch; 
this.writeMenu = writeMenu;

this.setTop=setMenuTop; 
this.setLeft=setMenuLeft; 
this.setWidth=setMenuWidth; 
this.setHeight=setMenuHeight; 
itemsNum=0; 
}

function setMenuTop(top){ 
this.top=top; 
}

function setMenuLeft(left){ 
this.left=left 
}

function setMenuWidth(width){ 
this.width=width 
}

function setMenuHeight(height){ 
this.height=height 
}

function addItemBranch(itemBranch){ 
this.itemBranchs[itemsNum] = itemBranch 
var cuttrutItemHeigt=(this.height)/this.itemBranchNum; 
var cuttrutItemWidth=this.width; 
var cuttrutItemTop=cuttrutItemHeigt*itemsNum-1; 
var cuttrutItemLeft=-1; 
itemBranch.setTop(cuttrutItemTop); 
itemBranch.setLeft(cuttrutItemLeft); 
itemBranch.setWidth(cuttrutItemWidth); 
itemBranch.setHeight(cuttrutItemHeigt); 
itemsNum++; 
//alert(itemBranch.top+"--"+itemBranch.left+"--"+itemBranch.width+"--"+itemBranch.height) 
//alert(this.itemBranchs.length) 
}

function writeMenu(){ 
var menuWidth=this.width; 
var menuHeight=this.height; 
var menuTop=this.top; 
var menuLeft=this.left; 
var menuId=this.menuId; 
var parentMenuId = this.parentMenuId; 
var menuString = ; 
menuString +=<div id="+menuId+" style="position:absolute; width:+menuWidth+px; height:+menuHeight+px; top:+menuTop+px; left:+menuLeft+px; display:+this.displayFlags+; background:#999999" onMouseOver="keepSubMenu(this,\+parentMenuId+\)" onmouseout="removeSubMenu(this,\+parentMenuId+\)"> 
var nums = this.itemBranchs.length; 
for (var i=0;i<nums;i++ ){ 
menuString += this.itemBranchs[i].writeItemBranch(); 
} 
menuString +=</div> 
document.write(menuString); 
}

function itemBranch(itemId,subMenuId,name,link,parentObj){ 
this.subMenu = new Object(); 
this.name=name; 
this.link=link; 
this.parentObj=parentObj; 
this.itemId=itemId; 
this.subMenuId=subMenuId; 
this.width=0; 
this.height=0; 
this.top=0; 
this.left=0; 
this.setTop=setItemTop; 
this.setLeft=setItemLeft; 
this.setWidth=setItemWidth; 
this.setHeight=setItemHeight; 
this.writeItemBranch = writeItemBranch; 
this.add = addSubMenu; 
}

function writeItemBranch(){ 
var itemStr=; 
var link=this.link; 
if(link==){ 
itemStr+=<div id="+this.itemId+" style="position:absolute; width:+this.width+px; height:+this.height+px; top:+this.top+px; left:+this.left+px;border:1px solid #000000;background:#ffffff;cursor:hand;" onmouseover="showSubMenu(\+this.subMenuId+\)" onmouseout="hiddenSubMenu(\+this.subMenuId+\)">; 
itemStr+=<span style="float:left; margin:5px">+this.name+</span> 
itemStr+=<span style="float:right; margin:5px; font-family:Webdings">8</span> 
itemStr+=</div>; 
}else{ 
itemStr+=<div id="+this.itemId+" style="position:absolute; width:+this.width+px; height:+this.height+px; top:+this.top+px; left:+this.left+px;border:1px solid #000000;background:#009033">; 
itemStr+=<span style="float:left; margin:5px">+this.name+</span> 
itemStr+=</div>; 
}

return itemStr; 
}

function showSubMenu(obj){ 
var objSubMenu = document.getElementById(obj).style; 
objSubMenu.display=block 
}

function hiddenSubMenu(obj){ 
document.getElementById(obj).style.display=none; 
}

function keepSubMenu(obj,parentId){ 
obj.style.display = block; 
if(parentId!=){ 
document.getElementById(parentId).style.display=block; 
}else{ 
// 
} 
}

function removeSubMenu(obj,parentId){ 
if(parentId==){ 
// 
}else{ 
if(obj.id!="mainMain"){ 
obj.style.display = none; 
} 
if(parentId!="mainMain"){ 
document.getElementById(parentId).style.display=none; 
} 
} 
}

function addSubMenu(subMenuObj){ 
this.subMenu = subMenuObj 
var top=this.parentObj.top+this.top; 
var width=subMenuObj.width; 
var left=this.parentObj.left+this.width; 
var height=subMenuObj.height; 
subMenuObj.displayFlags = none; 
subMenuObj.setTop(top); 
subMenuObj.setLeft(left); 
subMenuObj.setWidth(width); 
subMenuObj.setHeight(height); 
subMenuObj.writeMenu(); 
//subMenuObj.style.diplay=none 
//alert(left); 
//alert(subMenuObj.width) 
}

function setItemTop(top){ 
this.top=top; 
}

function setItemLeft(left){ 
this.left=left; 
}

function setItemWidth(width){ 
this.width=width; 
}

function setItemHeight(height){ 
this.height=height; 
}

</script> 
</head> 
<body> 
<script language="javascript"> 
/* 
建立菜单的规则，菜单的内容要一组一组的写，要有顺序 。 
例如： 
先建立一个主菜单，menu是一个对象，在建立对象的时候，必须生成一个实例； 
菜单实例里面有几个参数，分别是：菜单的id、菜单的宽度（menuWidth）、菜单的高度（menuHeight）、 
菜单的纵坐标（menuTop）、菜单的横坐标（menuLeft）和含有子菜单的个数（这个的主要作用是将菜单的高度按子项平分， 
最后把这个平分之后的值作为子项的高度） 
注意：如果是主菜单，那么这四项就必须全部填写 。如果是子菜单，那么纵坐标和横坐标可以填写任意值 
var mainMenu=new menu(,100,100,50,100,5);

菜单里面的子项也是一个对象，所以在添加之前也必须先生成实例 。 
子项的参数有itemId（子项的id）,subMenuId（添加子菜单的id）,name(子项显示的名字),link（子项的连接）,parentObj（子项的父菜单的对象） 
*/ 
var mainMain= new menu(mainMain,100,100,50,50,4,); 
var itemBranch_1 = new itemBranch(itemBranch_1,subMenu_1,考试类,,mainMain);//********* itemBranch_1 
var itemBranch_2 = new itemBranch(itemBranch_2,subMenu_2,娱乐类,,mainMain);//********** itemBranch_2 
mainMain.add(itemBranch_1); 
mainMain.add(itemBranch_2); 
mainMain.add(new itemBranch(,,知识技能类,http://www.baidu.com,null)); 
mainMain.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
mainMain.writeMenu();

//二级菜单 
var subMenu_1 = new menu(subMenu_1,100,100,50,50,4,mainMain); 
var itemBranch_3 = new itemBranch(itemBranch_3,subMenu_1_1,知识技能类,,subMenu_1)//************ itemBranch_3 
subMenu_1.add(itemBranch_3); 
subMenu_1.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
subMenu_1.add(new itemBranch(,,知识技能类,http://www.jb51.net,null)); 
subMenu_1.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
itemBranch_1.add(subMenu_1);

var subMenu_2 = new menu(subMenu_2,100,100,50,50,5,mainMain); 
subMenu_2.add(new itemBranch(,,知识技能类,http://www.baidu.com,null)); 
subMenu_2.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
subMenu_2.add(new itemBranch(,,知识技能类,http://www.baidu.com,null)); 
subMenu_2.add(new itemBranch(,,交互类,http://www.jb51.net,null)); 
subMenu_2.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
itemBranch_2.add(subMenu_2);

//三级菜单

var subMenu_1_1 = new menu(subMenu_1_1,100,100,50,50,4,subMenu_1); 
subMenu_1_1.add(new itemBranch(,,知识技能类,http://www.baidu.com,null)); 
subMenu_1_1.add(new itemBranch(,,交互类,http://www.jb51.net,null)); 
subMenu_1_1.add(new itemBranch(,,知识技能类,http://www.baidu.com,null)); 
subMenu_1_1.add(new itemBranch(,,交互类,http://www.baidu.com,null)); 
itemBranch_3.add(subMenu_1_1); 
</script>

</body> 
</html>

技术文章快速查找

javaScript 关闭浏览器 (不弹出提示框)

Javascript优化技巧（文件瘦身篇）

JavaScript基础语法让人疑惑的地方小结

sencha touch 模仿tabpanel导航栏TabBar的实例代码

ASP 过滤数组重复数据函数(加强版)

Javascript连接多个数组不用concat来解决

用JavaScript制作趣味计数器

鼠标移动到图片名上,显示图片的简单实例

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建