一例非常简单的js原生态制作及实现的三级菜单特效代码

稿源：互联网 2018-09-03 02:25:10 点击： 12957 撤稿纠错

1、默认 #nav2 和 #nav3 是隐藏的。 2、当鼠标移到 #nav1 的时候 #nav2 显示，b标签 .icon 添加 cur 样式。 3、当鼠标移到 #nav2 的 LI 上时，this（当前）LI 添加 class="hover" ；并且 #nav3 相对应的 LI 显示【 #nav2 第一个 LI ，对应 #nav3 第一个 LI 】 4、当移出 #nav1 时， #nav2 和 #nav3 隐藏。

以下讨论的是和原生态三级菜单相关的一例非常简单的js原生态制作及实现的三级菜单特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

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

关于一例非常简单的js原生态制作及实现的三级菜单特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090391077.shtml方便下次再访问哦。

·上一篇： 支持各主流浏览器使用的鼠标拖动和拖拽的鼠标指针特效
·下一篇： 纯CSS3代码制作的仿安卓系统开机动画画面特效代码

一例非常简单的js原生态制作及实现的三级菜单特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻