JavaScript CSS菜單功能改進版

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

改進版本最佳化了這個問題，通過簡單的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"
};

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();
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More