The improved version optimizes this problem and adds menus through simple Javascript code. At the same time, the HTML page is very concise. You only need to write two lines of code! O (partition _ partition) O
1. Prerequisite: Introduce a CSS file and a JavaScript file to the HTML page. As follows:
Copy codeThe Code is as follows:
<! 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>
Introduce the CSS file: <link type = "text/css" rel = "stylesheet" href = "menu.css">. For more information about the menu.css code, see
Introduce JavaScript files: <script src = "menu. js"> </script>
2. The menu definition code is as follows:
Copy codeThe Code is as follows:
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 "));
M1.add (new MenuItem ("Close "));
M1.add (new MenuItem (""));
Var m2 = new Menu ("Edit ");
Root. add (m2 );
Root. toString ();
}
Note:
1) var root = new Root ();
Root. toString ();
Fixed format
2) Declaration menu:
Var m1 = new Menu ("File", "alert (this. innerText );");
The name displayed in the menu is "File", and The onclick event is alert (this. innerText );
Root. add (m1 );
Place the first-level menu (that is, the menu initially displayed on the page) under the root, and use the add () method
Var m11 = new MenuItem ("New "");
M1.add (m11 );
Declare "File" sub-menu "New"
M1.add (new MenuItem ("Open", "alert ('Open file ');"));
Declare "File" sub-menu "Open"
You can use the code above to add a menu.
Code file:
<1> menu.css
Copy codeThe Code is as follows:
# Menubar {
Font-family: verdana;
Font-size: 12px;
Margin: 1px;
}
# Menubar li {
Float: left;
Position: relative;
Text-align: left;
}
/* Each menu item style */
# Menubar li {
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 {
Display: none;
Position: absolute;
Top: 0px;
Left: 150px;
Margin-top: 0;
Margin-left: 0;
Width: 150px;
}
<2> menu. js
Copy codeThe Code is as follows:
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 ('foreend', 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: menuw.actnode
* Description: menustmactnode class
* @ Param {String} pText
* @ Param {String} pAction
* @ Return:
**************************************** ***/
Function menustmactnode (pText, pAction ){
This. text = pText | MenuConfig. defaultText;
This. action = pAction | MenuConfig. defaultAction;
This. id = MenuHandler. getId ();
This. childNodes = [];
}
Menustmactnode. prototype. add = function (node ){
This. childNodes [this. childNodes. length] = node;
}
/*************************************** ***
* Funciont Name: toString
* Description: generate HTML code
* @ Param
* @ Param
* @ Return:
**************************************** ***/
Menustmactnode. 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.css Style + "\"";
}
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 = menuw.actnode;
This. base (pText, pAction );
This. type = "Menu ";
This.css Style = pCssStyle | MenuConfig. defaultMenuCssStyle;
}
Menu. prototype = new menuw.actnode;
/*************************************** ***
* Funciont Name: MenuItem
* Description: MenuItem class
* @ Param {String} pText
* @ Param {String} pAction
* @ Return:
**************************************** ***/
Function MenuItem (pText, pAction ){
This. base = menuw.actnode;
This. base (pText, pAction );
This. type = "MenuItem ";
}
MenuItem. prototype = new menuw.actnode;
/*************************************** ***
* Funciont Name: Root
* Description: Root class
* @ Return:
**************************************** ***/
Function Root (){
This. id = "menubar ";
This. childNodes = [];
}
Root. prototype = new menuw.actnode;
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 "));
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 ();
}