JavaScript CSS菜单功能 改进版
程序员文章站
2022-06-19 19:50:24
改进版本优化了这个问题，通过简单的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();
}
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实现固定屏幕显示的方法