动画菜单的制作

我想要实现的是一个可以慢慢收起，可以慢慢出现的二级菜单。无非就是绑定事件，然后利用setTimeout方法来改变二级菜单的高度，从而实现上述效果。

本来不难，我却折腾了将近两个小时，把javascript代码改了又改，二级菜单就是不出现。最后，终于发现了问题的症结所在，那就是我开始搭建菜单的时候根本没有给二级菜单的ul标签设置id，可是javascript代码中，我却需要获得这个id才能对菜单进行操作。后来，我加上了这个被疏忽的id，然后菜单的终于正常了。

在这里附上代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>我的动画菜单</title>
  5     <meta charset="utf-8">
  6     <style type="text/css">
  7     *{
  8             padding:0px;
  9      }
 10         .meun{
 11             list-style-type: none;
 12             font-size:14px;
 13             font-weight: bold;
 14         }
 15         .meun li{
 16             float:left;
 17             margin-right:1px;
 18         }
 19         .meun a{
 20             display: block;
 21             color:#fff;
 22             background: #000;
 23             width:80px;
 24             line-height:34px;
 25             text-align: center;
 26             text-decoration: none;
 27         }
 28         .meun li a:hover{
 29             color:#000;
 30             background: #55f;
 31         }
 32         .meun ul{
 33             list-style:none;
 34             position:absolute;
 35             display:none;
 36             height:0px;
 37             overflow:hidden;
 38         }
 39     </style>
 40 
 41     <script type="text/javascript">
 42             window.onload = function () {
 43            
 44             //鼠标经过时的效果
 45             var Lis = document.getElementsByTagName("li");
 46                 for(var i=0; i<Lis.length; i++){
 47                     Lis[i].onmouseover = function () {
 48                         var u = this.getElementsByTagName("ul")[0];
 49                         if (u != undefined)
 50                             {u.style.display="block";
 51                              addH(u.id);}   
 52                     }
 53 
 54                     Lis[i].onmouseleave = function () {
 55                         var u = this.getElementsByTagName("ul")[0];
 56                         if (u != undefined)
 57                             subH(u.id);
 58                          
 59                     }
 60                 } 
 61             }
 62             function addH(id){
 63                 var ulList = document.getElementById(id);
 64                    var h = ulList.offsetHeight;
 65                   h=h+1;
 66                   if(h<=34){
 67                       ulList.style.height = h + "px";
 68                     setTimeout("addH('" + id + "')", 10);
 69                   }
 70                   else{
 71                       return;
 72                   }
 73             }
 74             function subH(id){
 75                 var ulList = document.getElementById(id);
 76                    var h = ulList.offsetHeight;
 77                   h=h-1;
 78                   if(h>=0){
 79                       ulList.style.height = h + "px";
 80                     setTimeout("subH('" + id + "')", 10);
 81                   }
 82                   else{
 83                       ulList.style.display="none";
 84                       return;
 85                   }
 86             }
 87    </script>
 88 </head>
 89 <body>
 90     <ul class="meun">
 91         <li><a href="#">首页</a></li>
 92         <li><a href="#">课程大厅</a>
 93             <ul id="a">
 94                 <li><a href="#">前端</a></li>
 95                 <li><a href="#">后端</a></li>
 96                 <li><a href="#">移动端</a></li>
 97             </ul>
 98         </li>
 99         <li><a href="#">学习中心</a></li>
100         <li><a href="#">加入我们</a></li>
101     </ul>
102 </body>
103 </html>

 

posted @ 2016-04-07 17:13  章台青青  阅读(243)  评论(0)    收藏  举报