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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
浅析js中mvvm模式实现的原理
Oct 06 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缓存类完整实例
2014/07/26 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Python抓取框架 Scrapy的架构
2016/08/12 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python 硬币兑换问题
2019/07/29 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
init进程的作用
2015/08/20 面试题
奥林匹克运动会口号
2014/06/19 职场文书
研究生求职自荐书
2014/06/23 职场文书
治庸问责心得体会
2014/09/12 职场文书
工作简历的自我评价
2019/05/16 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python