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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
一个判断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
PHP伪静态页面函数附使用方法
2008/06/20 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP echo()函数讲解
2019/02/15 PHP
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python zip文件 压缩
2008/12/24 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python GUI模拟实现计算器
2020/06/22 Python
Python中的With语句的使用及原理
2020/07/29 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python jieba库分词模式实例用法
2021/01/13 Python
工程班组长岗位职责
2013/12/30 职场文书
党员承诺践诺书
2014/05/20 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
万能检讨书2000字
2014/10/17 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Spring整合Mybatis的全过程
2021/06/28 Java/Android