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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
angular分页指令操作
Jan 09 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP进程同步代码实例
2015/02/12 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
学习ExtJS border布局
2009/10/08 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python编程argparse入门浅析
2018/02/07 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
专科毕业生学习生活的自我评价
2013/10/26 职场文书
实习生自我鉴定
2013/12/12 职场文书
毕业生的自我评价
2013/12/30 职场文书
写求职信有什么意义
2014/02/17 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
护士岗位竞聘书
2015/09/15 职场文书
纪检部部长竞选稿
2015/11/21 职场文书