实现下拉菜单动画效果 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>下拉菜单</title>
  6     <style type="text/css">
  7         *{
  8             margin: 0px;
  9             padding: 0px;
 10         }
 11         #nav{
 12             background: #eee;
 13             width: 500px;
 14             height: 40px;
 15             margin: 0 auto ;
 16         }
 17         ul{
 18             list-style: none;
 19         }
 20         ul li{
 21             float: left;
 22             width: 80px;
 23             text-align: center;
 24             line-height: 40px;
 25             position: relative;
 26         }
 27         ul li ul{
 28             position:absolute;
 29             left: 0;
 30             top: 40px;
 31             height: 0px;
 32             overflow: hidden;
 33             display: block;
 34         }
 35         ul li ul li{
 36             background: #eee;
 37             margin-top: 2px;
 38         }
 39         a {
 40             text-decoration: none;
 41             color: black;
 42             display: block;
 43         }
 44         a:hover{
 45             color:white;
 46             background-color:black;
 47         }
 48         ul li ul li a:hover{
 49             background: red;
 50         }
 51     </style>
 52     <script type="text/javascript">
 53         var pd = 1;
 54         function ifchange(i){
 55             if (i == 1) {
 56                 pd = true;
 57             } 
 58             else {
 59                 pd = false;
 60             }
 61             changeNav(i);
 62         }
 63 
 64         function changeNav(i){
 65             var h = nav_ul.offsetHeight;
 66             h += i;
 67             if (i>0) {
 68                 if (h < 126 && pd) {
 69                     nav_ul.style.height = h + "px";
 70                     setTimeout("changeNav("+i+")",1);
 71                 }
 72                 else{
 73                     return;
 74                 }
 75             }
 76             else {
 77                 if (h > 0 && !pd) {
 78                     nav_ul.style.height = h + "px";
 79                     setTimeout("changeNav("+i+")",1);
 80                 }
 81                 else{
 82                     return;
 83                 }
 84             }
 85         }    
 86     </script>
 87 </head>
 88 <body>
 89     <div id="nav">
 90         <ul>
 91             <li><a href="#">首页</a></li>
 92             <li onmouseout="ifchange(-1)" onmouseover="ifchange(1)"><a href="#">课程</a>
 93                 <ul id="nav_ul">
 94                     <li><a href="#">Javascript</a></li>
 95                     <li><a href="#">JQuery</a></li>
 96                     <li><a href="#">PHP</a></li>
 97                 </ul>
 98             </li>
 99             <li><a href="#">学习中心</a></li>
100             <li><a href="#">经典案例</a></li>
101             <li><a href="#">关于我们</a></li>
102         </ul>
103     </div>
104 </body>
105 </html>

 

posted @ 2018-03-08 19:51  Emiracle  阅读(1239)  评论(0)    收藏  举报