CSS JavaScript 實現菜單功能 改進版
2024-05-06 14:16:36
供稿：網友
改進版本優化了這個問題，通過簡單的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;
