CSS JavaScript 实现菜单功能 改进版
改进版本优化了这个问题，通过简单的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;
}
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();
}
相关推荐
-
js+css实现tab菜单切换效果的方法
本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * { margin: 0px; padding: 0px; } body { width: 600px; margin: 0 auto; background-color: silver; } #contanier { background-color: yellow;
-
Div+Css(+Js)菜单代码及制作工具
效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:
-
Div+CSS+JS树型菜单，可刷新
搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了
-
js css实现垂直方向自适应的三角提示菜单
这是一个比较简单实用的菜单,最重要的是他不需要引用jQuery库.菜单在垂直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在下面,当主菜单靠近底部,子菜单在上面.运用Modernizr的触摸检测功能,我们可以让子菜单的响应在pc上是hover,而在触摸设备上是点击.例子中还示范了如何在宽度比较窄的情况下如何调整布局. html代码 <ul id="cbp-tm-menu" class="cbp-tm-menu"> <li> <a hr
-
无js5款纯div+css制作的弹出菜单标准
一.最基本的:二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; mar
-
JavaScript CSS 菜单功能代码
Menu #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; lin
-
通用的二级菜单代码(css+javascript)
]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d
-
JavaScript CSS创建右击菜单效果代码
效果图: css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default
-
css+js下拉菜单
css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla
-
JS+CSS 制作的超级简单的下拉菜单附图
先看效果: 代码: 复制代码 代码如下: <html> <head> <title>Good Test</title> <script> function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = "inline"; } function HideSubMenu(SubMenu) { document.getElementB