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

更新时间：2008年09月25日 21:05:10 作者：

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

<!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('','','知识技能类','https://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('','','交互类','https://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('','','交互类','https://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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

MAC官方菜单纯CSS实现灰色会换色
MAC官方网站的菜单,实际上是看着好看,但看了代码感觉不太实用,因为为了实现这么一个效果代码太繁琐,而且菜单修改起来也极不方便,建议大家以学习的态度阅读源码.
2009-11-11
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera...
2007-05-05
JavaScript CSS菜单功能改进版
在上一篇《JavaScript css 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
三级下拉菜单的js实现代码
纯js实现的三级下拉菜单效果的代码，需要的朋友可以参考下。
2011-05-05
js仿淘宝的拼音检索特效代码
如果需要查询数据库,自己修改成ajax调用吧,效果会很好的.
2008-08-08
新版本susymenu树形菜单，请大家指教、分享
新版本susymenu树形菜单，请大家指教、分享...
2007-09-09
jquery 导航设计实现代码学习jquery的朋友可以看下
jquery 导航设计，主要是通过jquery控制一些css样式变换。
2009-09-09
麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12
使用html+css+js实现导航栏滚动渐变效果
这篇文章主要介绍了使用html+css+js实现导航栏滚动渐变效果,鼠标向下拖动滚动条的时候导航栏会随着拖动有一个渐变动画效果,非常的炫酷,快来学习一下如何制作吧
2023-03-03
js实现的非常棒的绿色下拉透明菜单
js实现的非常棒的绿色下拉透明菜单...
2007-03-03