JS+CSS弹出式二级菜单示例二

JS+CSS弹出式二级菜单示例二

这回要比上次强了，有效的把内容，形式和行为分离。

截图：


全部代码：

<! doctype html public "-//w3c//dtd html 4.0 transitional//en" >
< html >
  < head >
   < title > JS+CSS菜单示例二 </ title >
   < script  src ="js/jquery-1.3.1.js"  type ="text/javascript" ></ script >
   < style  type ="text/css" >
    <!--
    #menubar ul {
      margin : 0 ;
      padding : 0 ;
      list-style-type : none ;
     }
    #menubar li {
      float : left ;
      dispaly : block ;       
     }
    #menubar li a {
      width : 80px ;
      height : 20px ;
      line-height :  20px ;

      font-size : 14px ;  
      border-right : 1px solid #ffffff ;   
      border-bottom : 1px dashed #ffffff ;  
      
      color : #ffffff ;
      text-decoration : none ;
      text-align : center ;
      font-weight : bold ;
      background-image : url(img/menubarBg.gif) ;
     }

    #menubar li a:hover {
      color : #ffffff ;
      background-image : url(img/munuBarItemBG.gif) ;       
      text-decoration : underline ;
     }

    #menubar li ul {
      display : none ;
      margin : 0 ;
      padding : 0 ;
      list-style-type : none ;
     }
    #menubar li ul li {
      float : none ;
      dispaly : block ;       
     }
    #menubar li ul li a {
      width : 80px ;
      height : 20px ;
      line-height :  20px ;

      font-size : 14px ;  
      border-right : 1px solid #ffffff ;   
      
      color : #ffffff ;
      text-decoration : none ;
      text-align : center ;
      font-weight : bold ;
      background-image : url(img/menubarBg.gif) ;
     }

    #menubar li ul li a:hover {
      color : #ffffff ;
      background-image : url(img/munuBarItemBG.gif) ;       
      text-decoration : underline ;
     }

    -->
   </ style >     
  </ head >

  < body >
  弹出式菜单示例二
   < div >
     < ul  id ="menubar" >
       < li >< a  href ="#" > 汉朝 </ a >
         < ul >
           < li >< a  href ="#" > 卫青 </ a ></ li >
           < li >< a  href ="#" > 霍去病 </ a ></ li >
           < li >< a  href ="#" > 班超 </ a ></ li >
           < li >< a  href ="#" > 陈汤 </ a ></ li >
         </ ul >
       </ li >
       < li >< a  href ="#" > 晋朝 </ a >
         < ul >
           < li >< a  href ="#" > 阮籍 </ a ></ li >
           < li >< a  href ="#" > 嵇康 </ a ></ li >
           < li >< a  href ="#" > 陶渊明 </ a ></ li >
           < li >< a  href ="#" > 王羲之 </ a ></ li >
           < li >< a  href ="#" > 桓温 </ a ></ li >
         </ ul >
       </ li >
       < li >< a  href ="#" > 唐朝 </ a >
         < ul >
           < li >< a  href ="#" > 李世民 </ a ></ li >
           < li >< a  href ="#" > 李白 </ a ></ li >
           < li >< a  href ="#" > 杜甫 </ a ></ li >
           < li >< a  href ="#" > 狄仁杰 </ a ></ li >
         </ ul >
       </ li >
       < li >< a  href ="#" > 宋朝 </ a >
         < ul >
           < li >< a  href ="#" > 岳飞 </ a ></ li >
           < li >< a  href ="#" > 辛弃疾 </ a ></ li >
           < li >< a  href ="#" > 苏轼 </ a ></ li >
         </ ul >
       </ li >
       < li >< a  href ="#" > 明朝 </ a >
         < ul >
           < li >< a  href ="#" > 徐达 </ a ></ li >
           < li >< a  href ="#" > 蓝玉 </ a ></ li >
           < li >< a  href ="#" > 于谦 </ a ></ li >
           < li >< a  href ="#" > 戚继光 </ a ></ li >
           < li >< a  href ="#" > 谭伦 </ a ></ li >
         </ ul >
       </ li >
     </ ul >
   </ div >
  </ body >
</ html >

< SCRIPT  LANGUAGE ="JavaScript" >
<!--
  
   function  $(id){
     return  document.getElementById(id);
  }

   function  showMenu(ulId,visible){
     var  ul = $(ulId);

     if (visible == true ){
      ul.style.display = " block " ;
    }
     else {
      ul.style.display = " none " ;
    }
  }

  window.onload = function (){

     var  menubar = $( " menubar " );

     for ( var  i = 0 ;i < menubar.childNodes.length;i ++ ){
       new   function (){
         var  li = menubar.childNodes[i];
         var  subul = li.childNodes[ 2 ];

        li.attachEvent('onmouseover',
           function (){
            subul.style.display = " block " ;
          }
        );
        li.attachEvent('onmouseout',
           function (){
            subul.style.display = " none " ;
          }
        );
      }
    }
  }
// -->
</ SCRIPT >

上面代码中最重要的部分是循环中代码放入到一个函数中，这是为了避免闭包的消极影响，使循环一次都生成一个函数实例，每个实例体针对的每个li和ul都是不同的。

全体代码下载：
http://www.blogjava.net/Files/heyang/JSCSSPopupmenu20090821151741.rar