一个菜单效果【侧边栏】

代码

1 function nav(num){
2 var i=num,n=0;
3 var navlist=$('navMenu').getElementsByTagName('dl'),l=navlist.length;
4 for(n;n<l;n++){
5 var cachh=navlist[n].offsetHeight;
6 navlist[n].style.height="auto";
7 var th=navlist[n].offsetHeight;
8 var fh=navlist[n].getElementsByTagName('dt')[0].offsetHeight;
9 navlist[n].style.height=fh+'px';
10 if(i===n){
11 clearTimeout(window[navlist[n]]);
12 move(navlist[n],{from:fh,to:th},0.2,50);
13 }else{
14 if (cachh>th){
15 clearTimeout(window[navlist[n]]);
16 move(navlist[n],{from:th,to:fh},0.2,50);
17 }
18 }
19 (function(m){
20 navlist[m].getElementsByTagName('dt')[0].onclick=function(){
21 nav(m);
22 }
23 })(n);
24 }
25 }
26 function move(o,size,easing,detay){
27 window[o]=window.setTimeout(function (){
28 //开始缓动
29 var speed=size.from;
30 speed +=(size.to-size.from)*easing;
31 o.style.height=speed+'px';
32 if (Math.abs((size.to-size.from)*easing*10)<1){
33 o.style.height=size.to+'px';
34 return false;
35 }
36 move(o,{from:speed,to:size.to},easing,detay);
37 },detay);
38 }
39 window.onload=function(){
40 nav(0);
41 }

以上是Javascript

代码

Html结构

posted @ 2010-09-13 19:04 Q上的路人甲阅读(202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

路人甲的小窝

慢悠悠的走在前端路上...

一个菜单效果【侧边栏】

公告