CSS+JavaScript 实现菜单功能

<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();　　
}