JavaScript CSS菜单功能改进版

改进版本优化了这个问题，通过简单的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 复制代码代码如下:#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; }<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(); }

　　推荐阅读

　　JavaScript 拖拉缩放效果

这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本>>>详细阅读

本文标题：JavaScript CSS菜单功能改进版

地址：http://www.17bianji.com/kaifa2/JS/29122.html

1/2 1

JavaScript CSS菜单功能 改进版

JavaScript CSS菜单功能改进版