天天看點
傳回

CSS+JavaScript 實作菜單功能--改進版

CSS+JavaScript 實作菜單功能--改進版

馬嘉楠   2008-12-08

共同學習，歡迎轉載。轉載請注明位址【http://blog.csdn.net/majianan/archive/2008/12/08/3477388.aspx】，謝謝！

在上一篇《CSS+JavaScript 實作菜單功能》通過一個HTML頁面簡單的實作了菜單功能。但是實際開發當中，如果菜單欄有很多項，頻繁的修改HTML，會很繁瑣，也容易出錯。

改進版本優化了這個問題，通過簡單的Javascript代碼就可以增加菜單。同時使得HTML頁面非常簡潔，隻需要寫2行代碼即可！O(∩_∩)O

1.使用前提，在HTML頁面中引入一個CSS檔案，和一個JavaScript檔案。如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.     <HEAD>
  4.         <TITLE>Menu</TITLE>
  5.         <link type="text/css" rel="stylesheet" href="menu.css">  
  6.     </HEAD>
  7.     <BODY>
  8.         <div><script src="menu.js"></script></div>
  9.     </BODY>
  10. </HTML>

引入CSS檔案：<link type="text/css" rel="stylesheet" href="menu.css">  ，menu.css代碼見後

引入JavaScript檔案：<script src="menu.js"></script>

2.定義菜單代碼如下：

  1. if (document.getElementById){
  2.     var root = new Root();  
  3.     var m1 = new Menu("File","alert(this.innerText);");
  4.     root.add(m1);
  5.     var m11 = new MenuItem("New");
  6.     m1.add(m11);
  7.     m1.add(new MenuItem("Open","alert('open file');"));
  8.     var m12 = new MenuItem("Save");
  9.     m1.add(m12);
  10.     m1.add(new MenuItem("Save As"));
  11.     m1.add(new MenuItem("Close"));
  12.     m1.add(new MenuItem(""));
  13.     var m2 = new Menu("Edit");
  14.     root.add(m2);
  15.     root.toString();    
  16. }

說明：

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

  1. #menubar { 
  2.     font-family:verdana; 
  3.     font-size:12px;              
  4.     margin:1px; 
  5. } 
  6. #menubar li { 
  7.     float:left; 
  8.     position:relative;               
  9.     text-align:left; 
  10. }        
  11. #menubar li a { 
  12.     border-style:none; 
  13.     color:black; 
  14.     display:block;                           
  15.     width:150px; 
  16.     height:20px; 
  17.     line-height:20px; 
  18.     padding-left:10px; 
  19.     text-decoration:none;    
  20. } 
  21. #menubar .menuMain{ 
  22.     border-color:#C0C0C0; 
  23.     border-width:1px; 
  24.     border-style:solid; 
  25. } 
  26. #menubar li a:hover{ 
  27.     background-color:#efefef;  
  28.     text-decoration:underline; 
  29. } 
  30. #menubar li ul{ 
  31.     background-color:#efefef; 
  32.     border-style:none; 
  33.     display:none; 
  34.     position:absolute; 
  35.     top:20px; 
  36.     left:-40px; 
  37.     margin-top:2px; 
  38.     width:150px;             
  39. } 
  40. #menubar li ul li a:hover { 
  41.     text-decoration:underline;  
  42.     padding-left:20px;  
  43. } 
  44. #menubar li ul li ul { 
  45.     display:none; 
  46.     position:absolute; 
  47.     top:0px; 
  48.     left:150px;  
  49.     margin-top:0; 
  50.     margin-left:0; 
  51.     width:150px; 
  52. }  

<2>menu.js

  1. var MenuConfig = {
  2.     defaultText : "Menu Item",
  3.     defaultAction : "javascript:void(0);"   ,
  4.     defaultMenuCssStyle : "menuMain"
  5. };
  6. var MenuHandler = {
  7.     idCounter : 0,
  8.     idPrefix : "menu-",
  9.     getId : function(){ return this.idPrefix + this.idCounter++ ;},
  10.     insertHTMLBeforeEnd : function(node, sHTML){
  11.         if(node.insertAdjacentHTML != null){
  12.             node.insertAdjacentHTML('BeforeEnd',sHTML);
  13.             return;
  14.         }
  15.         var df; // DocumentFragment
  16.         var r = node.ownerDocument.createRange();
  17.         r.selectNodeContents(node);
  18.         r.collapse(false);
  19.         df = r.createContextualFragment(sHTML);
  20.         node.appendChild(df);
  21.     }
  22. }
  23. function displaySubMenu(li){ 
  24.     var subMenu = li.getElementsByTagName('ul')[0]; 
  25.     if(subMenu)
  26.         subMenu.style.display = 'block'; 
  27. } 
  28. function hideSubMenu(li){ 
  29.     var subMenu = li.getElementsByTagName('ul')[0];   
  30.     if(subMenu)
  31.         subMenu.style.display = 'none'; 
  32. }  
  33. function MenuAbstractNode(pText, pAction){
  34.     this.text = pText || MenuConfig.defaultText;    
  35.     this.action = pAction || MenuConfig.defaultAction;
  36.     this.id = MenuHandler.getId();
  37.     this.childNodes = [];
  38. }
  39. MenuAbstractNode.prototype.add = function(node){
  40.     this.childNodes[this.childNodes.length] = node;
  41. }
  42. MenuAbstractNode.prototype.toString = function(){   
  43.     var str = "<li id=/"" + this.id + "/" οnmοuseοver=/"displaySubMenu(this)/" οnmοuseοut=/"hideSubMenu(this)/"><a href=/"#/"";
  44.     if(this.type=="Menu"){
  45.         str = str + " class=/"" + this.cssStyle + "/"";
  46.     }
  47.     str = str + " οnclick=/""+this.action+"/">"+this.text+"</a>";
  48.     var sb = [];
  49.     for (var i = 0; i < this.childNodes.length; i++) {
  50.         sb[i] = this.childNodes[i].toString();
  51.     }
  52.     if(sb.length>0){
  53.         str = str + "<ul>" + sb.join("") + "</ul>"
  54.     }
  55.     return str + "</li>" ;
  56. }
  57. function Menu(pText, pAction,pCssStyle){
  58.     this.base = MenuAbstractNode;
  59.     this.base(pText,pAction);
  60.     this.type = "Menu";
  61.     this.cssStyle = pCssStyle || MenuConfig.defaultMenuCssStyle;
  62. }
  63. Menu.prototype = new MenuAbstractNode;
  64. function MenuItem(pText, pAction){
  65.     this.base = MenuAbstractNode;
  66.     this.base(pText,pAction);
  67.     this.type = "MenuItem";
  68. }
  69. MenuItem.prototype = new MenuAbstractNode;
  70. function Root(){
  71.     this.id = "menubar";
  72.     this.childNodes=[]; 
  73. }
  74. Root.prototype = new MenuAbstractNode;
  75. Root.prototype.toString = function(){
  76.     document.write("<div id='menu'><ul id=/""+root.id+"/"> </ul> </div>");
  77.     for(var i=0; i<this.childNodes.length; i++){
  78.         MenuHandler.insertHTMLBeforeEnd(document.getElementById(root.id), this.childNodes[i].toString());
  79.     }
  80. }
  81. if (document.getElementById){
  82.     var root = new Root();  
  83.     var m1 = new Menu("File","alert(this.innerText);");
  84.     root.add(m1);
  85.     var m11 = new MenuItem("New","alert(this.innerText);");
  86.     m1.add(m11);
  87.     m1.add(new MenuItem("Open","alert('open file');"));
  88.     var m12 = new MenuItem("Save");
  89.     m1.add(m12);
  90.     m1.add(new MenuItem("Save As"));
  91.     m1.add(new MenuItem("Close"));
  92.     m1.add(new MenuItem(""));
  93.     var m2 = new Menu("Edit");
  94.     root.add(m2);
  95.     var m22 = new MenuItem("Select All");
  96.     m2.add(m22);
  97.     m2.add(new MenuItem("Cut"));
  98.     m2.add(new MenuItem("Copy"));
  99.     m2.add(new MenuItem("paste"));
  100.     var m3 = new Menu("View");
  101.     var m33 = new MenuItem("View List");
  102.     m33.add(new MenuItem("Function List"));
  103.     m3.add(m33);
  104.     m3.add(new MenuItem("Tool Bar"));
  105.     root.add(m3);
  106.     root.toString();    
  107. }
【06】SourceCode 【01】JavaScript javascript css stylesheet string function file
上一篇: StringBuffer源碼淺析(append方法)
下一篇: StringBuffer源碼淺析(insert方法)

繼續閱讀