<! 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 >

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

#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 ;   

}   

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 +  " \ "  οnmοuseοver=\ " displaySubMenu( this )\ "  οnmοuseοut=\ " hideSubMenu( this )\ " ><a href=\ " #\ "" ; 

     if ( this .type == " Menu " ) { 

        str  =  str  +   "  class=\ ""  + this.cssStyle +  " \ "" ; 

    }  

    str  =  str  +   "  οnclick=\ "" +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();     

}