js原生态制作及实现的三级菜单特效代码-JS特效-爱易网页

js原生态制作及实现的三级菜单特效代码

日期：2014-05-18　浏览次数：22828 次

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">                      
<html lang="en">                      
    <head>                       
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">                       
        <title>
        </title>
        <style type="text/css">*{padding:0;margin:0; } li{  list-style:none; } ul{  background:rgb(200,13,34);  width:250px;    float:left;     } b{  display:block;  width:500px;  height:40px;  background:rgb(24,122,173); } ul li{  height:32px;   }  ul li:hover{  height:32px;  background:orange;   } #nav1{  position:absolute; } #nav3{  position:relative;  left:0;    background:green;;  visibility:hidden; } 
        </style>                                               
    </head>                      
    <body>
        <div id="nav1">     
            <b class="icon"> 
                <i id="log" ></i></b>     
            <ul id="nav2">         
                <li>1
                </li>         
                <li>2
                </li>         
                <li>3
                </li>     
            </ul>     
            <ul id="nav3">         
                <li>1-1
                </li>         
                <li>2-1
                </li>         
                <li>3-1
                </li>     
            </ul> 
        </div>                                 
<script type="text/javascript">
 var focus=false;
 var showdiv=document.getElementById("nav3");
    showdiv.onmouseover=function(){
       focus=true;
          this.style.visibility="visible";
    }
     showdiv.onmouseout=function(){
     focus=false;
       this.style.visibility="hidden";
    }
function bindToggle(index,flag){
     var showdiv=   document.getElementById("nav3");                            
     var delayshow= function(){
     if(flag ==1 ){
         showdiv.style.visibility="visible";
         showdiv.style.top=index*32+"px";
     }else {
        if(!focus){
            showdiv.style.visibility="hidden";
        }     
     }
    
   }
   return function(){ 
   setTimeout(delayshow,150);
   } 
}
   var menu=document.getElementById("nav2").childNodes;
   var index=0;
   for(var i=0;i<menu.length;i++){
    if(1==menu[i].nodeType){
   
     menu[i].onmouseover=  bindToggle.call(menu[i],index,1);
        menu[i].onmouseout=  bindToggle.call(menu[i],index,0);
          index++;
    }        
   } 
</script>                                                
    </body>                      
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js原生态制作及实现的三级菜单特效代码

相关资料更多>

推荐阅读更多>