CSS+JavaScript 实现菜单功能

说明：

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.cs

#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;　
}