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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 无限级别的菜单（侧拉菜单）

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 306 ::

收藏到网摘: n/a

不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术点选TOP后并不是直接跳到页顶的，而是滚动上去

无限级导航菜单，这个是可以任意加载子菜单，原理比较不错，推荐大家学习

点击运行可以看到效果:

<!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"><a href="'+link+'">'+this.name+'</a></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.ruanchen.com',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.ruanchen.com',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.ruanchen.com',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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术点选TOP后并不是直接跳到页顶的，而是滚动上去

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

评论 (0) All

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