原文：http://blog.csdn.net/majianan/archive/2008/12/08/3477388.aspx

在上一篇《CSS+JavaScript 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。

改进版本优化了这个问题，通过简单的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
<2>menu.js