The improved version optimizes the problem by adding a menu to a simple JavaScript code. At the same time make the HTML page is very concise, only need to write 2 lines of code can! O (∩_∩) o
1. Use the premises, introduce a CSS file in the HTML page, and a JavaScript file. As follows:
Introduce CSS file: <link type= "Text/css" rel= "stylesheet" href= "Menu.css" >, MENU.CSS code See after
2. Define menu code as follows:
The menu displays the name "File", and the OnClick event is alert (This.innertext);
The first Level menu (the menu that the page initially displays) is placed under root, using the Add () method
The above code can complete the menu add function.
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 h Ref=\ "#\";
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 ();
}
