CSS JavaScript 实现菜单功能 改进版


Posted in Javascript onDecember 09, 2008

改进版本优化了这个问题,通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁,只需要写2行代码即可!O(∩_∩)O
1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件。如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>Menu</TITLE> 
<link type="text/css" rel="stylesheet" href="menu.css"> 
</HEAD> 
<BODY> 
<div><script src="menu.js"></script></div> 
</BODY> 
</HTML>

引入CSS文件:<link type="text/css" rel="stylesheet" href="menu.css"> ,menu.css代码见后
引入JavaScript文件:<script src="menu.js"></script>
2.定义菜单代码如下:
if (document.getElementById){ 
var root = new Root(); var m1 = new Menu("File","alert(this.innerText);"); 
root.add(m1); 
var m11 = new MenuItem("New"); 
m1.add(m11); 
m1.add(new MenuItem("Open","alert('open file');")); 
var m12 = new MenuItem("Save"); 
m1.add(m12); 
m1.add(new MenuItem("Save As")); 
m1.add(new MenuItem("Close")); 
m1.add(new MenuItem("")); 
var m2 = new Menu("Edit"); 
root.add(m2); 
root.toString(); 
}

说明:
1) var root = new Root();
root.toString();
固定格式
2)声明菜单:
var m1 = new Menu("File","alert(this.innerText);");
菜单显示的名称为“File”,onclick事件为alert(this.innerText);
root.add(m1);
第一级菜单(即页面初始显示的菜单)放到root之下,通过add()方法
var m11 = new MenuItem("New"");
m1.add(m11);
声明“File”的子菜单“New”
m1.add(new MenuItem("Open","alert('open file');"));
声明“File”的子菜单“Open”
通过上面的代码即可完成菜单的添加功能。
代码文件:
<1> menu.css 
#menubar { 
font-family:verdana; 
font-size:12px; 
margin:1px; 
} 
#menubar li { 
float:left; 
position:relative; 
text-align:left; 
} 
/* each menu item style */ 
#menubar li a { 
border-style:none; 
color:black; 
display:block; 
width:150px; 
height:20px; 
line-height:20px; 
padding-left:10px; 
text-decoration:none; 
} 
/* the first level menu which displays default */ 
#menubar .menuMain{ 
border-color:#C0C0C0; 
border-width:1px; 
border-style:solid; 
} 
/* the first leve style when mouse on it */ 
#menubar li a:hover{ 
background-color:#efefef; 
text-decoration:underline; 
} 
/* the second level menu block style */ 
#menubar li ul{ 
background-color:#efefef; 
border-style:none; 
display:none; 
position:absolute; 
top:20px; 
left:-40px; 
margin-top:2px; 
width:150px; 
} 
/* the sub menu item style when mouse on it */ 
#menubar li ul li a:hover { 
text-decoration:underline; 
padding-left:20px; 
} 
/* the third or more level menu block style */ 
#menubar li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:150px; 
margin-top:0; 
margin-left:0; 
width:150px; 
}

<2>menu.js
var MenuConfig = { 
defaultText : "Menu Item", 
defaultAction : "javascript:void(0);" , 
defaultMenuCssStyle : "menuMain" 
}; var MenuHandler = { 
idCounter : 0, 
idPrefix : "menu-", 
getId : function(){ return this.idPrefix + this.idCounter++ ;}, 
insertHTMLBeforeEnd : function(node, sHTML){ 
if(node.insertAdjacentHTML != null){ 
node.insertAdjacentHTML('BeforeEnd',sHTML); 
return; 
} 
var df; // DocumentFragment 
var r = node.ownerDocument.createRange(); 
r.selectNodeContents(node); 
r.collapse(false); 
df = r.createContextualFragment(sHTML); 
node.appendChild(df); 
} 
} 
function displaySubMenu(li){ 
var subMenu = li.getElementsByTagName('ul')[0]; 
if(subMenu) 
subMenu.style.display = 'block'; 
} 
function hideSubMenu(li){ 
var subMenu = li.getElementsByTagName('ul')[0]; 
if(subMenu) 
subMenu.style.display = 'none'; 
} 

/****************************************** 
* Funciont Name: MenuAbstractNode 
* Description: MenuAbstractNode class 
* @param {String} pText 
* @param {String} pAction 
* @Return: 
*******************************************/ 
function MenuAbstractNode(pText, pAction){ 
this.text = pText || MenuConfig.defaultText; 
this.action = pAction || MenuConfig.defaultAction; 
this.id = MenuHandler.getId(); 
this.childNodes = []; 
} 
MenuAbstractNode.prototype.add = function(node){ 
this.childNodes[this.childNodes.length] = node; 
} 
/****************************************** 
* Funciont Name: toString 
* Description: generate HTML code 
* @param 
* @param 
* @Return: 
*******************************************/ 
MenuAbstractNode.prototype.toString = function(){ 
var str = "<li id=\"" + this.id + "\" onmouseover=\"displaySubMenu(this)\" onmouseout=\"hideSubMenu(this)\"><a href=\"#\""; 
if(this.type=="Menu"){ 
str = str + " class=\"" + this.cssStyle + "\""; 
} 
str = str + " onclick=\""+this.action+"\">"+this.text+"</a>"; 
var sb = []; 
for (var i = 0; i < this.childNodes.length; i++) { 
sb[i] = this.childNodes[i].toString(); 
} 
if(sb.length>0){ 
str = str + "<ul>" + sb.join("") + "</ul>" 
} 
return str + "</li>" ; 
} 
/****************************************** 
* Funciont Name: Menu 
* Description: Menu class 
* @param {String} pText 
* @param {String} pAction 
* @param {String} pCssStyle 
* @Return: 
*******************************************/ 
function Menu(pText, pAction,pCssStyle){ 
this.base = MenuAbstractNode; 
this.base(pText,pAction); 
this.type = "Menu"; 
this.cssStyle = pCssStyle || MenuConfig.defaultMenuCssStyle; 
} 
Menu.prototype = new MenuAbstractNode; 
/****************************************** 
* Funciont Name: MenuItem 
* Description: MenuItem class 
* @param {String} pText 
* @param {String} pAction 
* @Return: 
*******************************************/ 
function MenuItem(pText, pAction){ 
this.base = MenuAbstractNode; 
this.base(pText,pAction); 
this.type = "MenuItem"; 
} 
MenuItem.prototype = new MenuAbstractNode; 

/****************************************** 
* Funciont Name: Root 
* Description: Root class 
* @Return: 
*******************************************/ 
function Root(){ 
this.id = "menubar"; 
this.childNodes=[]; 
} 
Root.prototype = new MenuAbstractNode; 
Root.prototype.toString = function(){ 
document.write("<div id='menu'><ul id=\""+root.id+"\"> </ul> </div>"); 
for(var i=0; i<this.childNodes.length; i++){ 
MenuHandler.insertHTMLBeforeEnd(document.getElementById(root.id), this.childNodes[i].toString()); 
} 
} 
if (document.getElementById){ 
var root = new Root(); 
var m1 = new Menu("File","alert(this.innerText);"); 
root.add(m1); 
var m11 = new MenuItem("New","alert(this.innerText);"); 
m1.add(m11); 
m1.add(new MenuItem("Open","alert('open file');")); 
var m12 = new MenuItem("Save"); 
m1.add(m12); 
m1.add(new MenuItem("Save As")); 
m1.add(new MenuItem("Close")); 
m1.add(new MenuItem("")); 
var m2 = new Menu("Edit"); 
root.add(m2); 
var m22 = new MenuItem("Select All"); 
m2.add(m22); 
m2.add(new MenuItem("Cut")); 
m2.add(new MenuItem("Copy")); 
m2.add(new MenuItem("paste")); 
var m3 = new Menu("View"); 
var m33 = new MenuItem("View List"); 
m33.add(new MenuItem("Function List")); 
m3.add(m33); 
m3.add(new MenuItem("Tool Bar")); 
root.add(m3); 
root.toString(); 
}
Javascript 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
javascript定义函数的方法
Dec 06 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
一个判断email合法性的函数[非正则]
Dec 09 #Javascript
Javascript 表单之间的数据传递代码
Dec 04 #Javascript
Javascript !!的作用
Dec 04 #Javascript
js 深拷贝函数
Dec 04 #Javascript
JavaScript 基础问答三
Dec 03 #Javascript
asp 取文本框名称代码
Dec 02 #Javascript
JavaScript获得选中文本内容的方法
Dec 02 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
php的ajax简单实例
2014/02/27 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python文件及目录操作代码汇总
2020/07/08 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
餐饮采购员岗位职责
2014/03/15 职场文书
建筑工地宣传标语
2014/06/18 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
大学生个人总结范文
2015/02/15 职场文书
反邪教观后感
2015/06/11 职场文书
在职证明格式样本
2015/06/15 职场文书
简爱读书笔记
2015/06/26 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Python编写nmap扫描工具
2021/07/21 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL