缓冲下拉导航菜单

闲来无聊，好久以前写的这个代码了，都忘了写法了，才找到，整理上来~~

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 body{font-size:14px;}
  8 ul,li{list-style:none; margin:0; padding:0;}
  9 a{text-decoration:none; color:#333;}
 10 #nav{
 11     width:900px; height:30px;
 12     margin:0 auto; padding:0; background-color:#0FF;
 13 }
 14 #nav li{
 15     width:100px; height:30px; line-height:30px;
 16     float:left; background-color:#ccc; text-align:center;
 17     position:relative; cursor:pointer;
 18 }
 19 #nav li a{
 20     background-color:#96F;
 21     width:100px; height:30px; line-height:30px; display:block;
 22 }
 23 #nav .active{background-color:#309; color:#FFF;}
 24 .box{width:100px; padding:0; margin:0; position:absolute; top:30px; left:0; overflow:hidden; background-color:#000; height:0;}
 25 </style>
 26 <script type="text/javascript">
 27 window.onload    =    function ()
 28 {
 29     var        oNav    =    document.getElementById("nav");
 30     var        oLi        =    oNav.getElementsByTagName("li");
 31     var        i        =    0;
 32     
 33             for(i=0;i<oLi.length;i++)
 34             {
 35                 oLi[i].onmouseover    =    function ()
 36                 {
 37                     var        oHeight    =    this.getElementsByTagName("div")[0].scrollHeight;
 38                     
 39                     this.className    =    "active";
 40                     
 41                     show(this,oHeight);
 42                 };
 43                 oLi[i].onmouseout    =    function ()
 44                 {
 45                     this.className    =    " ";
 46                     show(this,0);
 47                 };
 48             };
 49 };
 50 function show(obj,n)
 51 {
 52     var        oDiv    =    obj.getElementsByTagName("div")[0];
 53     var        aA        =    obj.getElementsByTagName("a");
 54                     
 55             clearInterval(obj.timer);
 56             obj.timer    =    setInterval(function (){
 57                 if(n    ==    oDiv.offsetHeight)
 58                 {
 59                     clearInterval(obj.timer);
 60                     obj.timer    =    null;
 61                 }
 62                 else
 63                 {
 64                     var        iHeight    =    (n    -    oDiv.offsetHeight)    /    10;
 65                     
 66                             iHeight    =    iHeight>0?Math.ceil(iHeight):Math.floor(iHeight);
 67                     
 68                             oDiv.style.height    =    (oDiv.offsetHeight    +    iHeight)    +    "px";
 69                 }
 70                 },30);
 71 }
 72 </script>
 73 </head>
 74 
 75 <body>
 76 <ul id="nav">
 77     <li>11111
 78         <div class="box">
 79 
 80             <a href="#">11111111111</a>
 81             <a href="#">11111111111</a>
 82             <a href="#">11111111111</a>
 83             <a href="#">11111111111</a>
 84             <a href="#">11111111111</a>
 85             <a href="#">11111111111</a>
 86 
 87             <a href="#">11111111111</a>
 88         </div>
 89     </li>
 90     <li>22222
 91         <div class="box">
 92             <a href="#">22222222222</a>
 93             <a href="#">22222222222</a>
 94             <a href="#">22222222222</a>
 95 
 96             <a href="#">22222222222</a>
 97         </div>
 98         </li>
 99     <li>33333
100         <div class="box">
101             <a href="#">33333333333</a>
102             <a href="#">33333333333</a>
103             <a href="#">333333333333</a>
104 
105             <a href="#">22222222222</a>
106         </div>
107     </li>
108     <li>44444
109         <div class="box">
110             <a href="#">444444444</a>
111             <a href="#">444444444</a>
112             <a href="#">44444444</a>
113 
114             <a href="#">44444444</a>
115         </div>    
116     </li>
117     <li>55555
118         <div class="box">
119             <a href="#">5555555555</a>
120             <a href="#">555555555</a>
121             <a href="#">5555555555</a>
122 
123             <a href="#">5555555555</a>
124         </div>
125     </li>
126     <li>66666
127         <div class="box">
128             <a href="#">6666666666</a>
129             <a href="#">66666666666</a>
130             <a href="#">66666666666</a>
131 
132             <a href="#">66666666666</a>
133         </div>
134     </li>
135 </ul>
136 </body>
137 </html>
posted @ 2012-06-25 16:50  胡淼  阅读(142)  评论(0)    收藏  举报