代码驿站移动版
频道导航
HTML/Xhtml
CSS
JavaScript
HTML5
PHP教程
ASP.NET
正则表达式
AJAX
ThinkPHP
Yii
MySQL
MariaDB
Oracle
MongoDB
Redis
DedeCMS
PHPCMS
帝国CMS
WordPress
Discuz
其它CMS
Zend Studio
Sublime
Notepad
Dreamweaver
Windows
Linux
Nginx
Apache
IIS
CentOS
Ubuntu
Debian
网站优化
工具资源
PHP源码
ASP.NET源码
其它源码
图标素材
按钮素材
字体素材
DedeCMS模板
帝国CMS模板
PHPCMS模板
WordPress模板
Discuz!模板
单页模板
开发软件下载
服务器软件下载
广告投放
联系我们
版权申明
软件编程
网页前端
移动开发
数据库
服务器
脚本语言
PHP代码
JAVA代码
Python代码
Android代码
当前位置:
主页
>
网页前端
>
JavaScript代码
>
无限级别的菜单(侧拉菜单)
时间:2021-04-30 10:14:05 | 栏目:
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"><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需再刷新一下页面才能执行
]
您可能感兴趣的文章:
JavaScript常见事件处理程序实例总结
Javascript的匿名函数小结
url传递的参数值中包含&时,url自动截断问题的解决方法
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
兼容浏览器的js事件绑定函数(详解)
相关文章
10-19
javascript上下左右定时滚动插件
11-23
Webpack中loader打包各种文件的方法实例
11-27
Javascript实例教程(19) 使用HoTMetal(2)
10-05
javascript判断图片是否加载完成的方法推荐
11-22
在javascript中执行任意html代码的方法示例解读
JQuery
VUE
AngularJS
MSSql
MySQL
MongoDB
Redis
Linux
Tomcat
Nginx
网站首页
广告投放
联系我们
版权申明
联系站长