欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS JavaScript 实现菜单功能 改进版

程序员文章站 2022-06-10 19:12:02
改进版本优化了这个问题，通过简单的javascript代码就可以增加菜单。同时使得html页面非常简洁，只需要写2行代码即可！o(∩_∩)o 1.使用前提，在html页面中...
改进版本优化了这个问题，通过简单的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();
}

上一篇： Android小知识之OkHttp的2种请求方式详解

下一篇： PHP常用的小程序代码段_PHP

推荐阅读