JavaScript CSS菜单功能 改进版


Posted in Javascript onDecember 20, 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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
Prototype Array对象 学习
Jul 19 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
JavaScript 字符串连接性能优化
Dec 20 #Javascript
js一组验证函数
Dec 20 #Javascript
flash javascript之间的通讯方法小结
Dec 20 #Javascript
javascript this用法小结
Dec 19 #Javascript
js 提交和设置表单的值
Dec 19 #Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 #Javascript
简单通用的JS滑动门代码
Dec 19 #Javascript
You might like
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
python实现微信定时每天和女友发送消息
2019/04/29 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python环境下安装opencv库的方法
2020/03/05 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
五一服装活动方案
2014/01/11 职场文书
化学教学随笔感言
2014/02/19 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
安全教育实施方案
2014/03/02 职场文书
劲霸男装广告词
2014/03/21 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
工程承包协议书范本
2014/09/29 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
城南旧事读书笔记
2015/06/29 职场文书
公司新员工欢迎词
2015/09/30 职场文书