html折叠菜单列子,js实现顶部可折叠的菜单工具栏效果实例

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html,body{

margin:0;

}

body{

url(img.jpg) repeat-x;

}

ha{

margin:0 auto;

}

img{

border:none;

}

#fx_topToolbar{

position:relative;top:-76px;left:0;

margin:0 auto;height:92px;

background:#0C3E74; width:700px;

text-align:center;

}

#fx_topToolbar .shell{

margin:0 auto;padding:13px 0;

}

#btn_offOn{

position:absolute;bottom:-8px;

left:20px;height:24px; width:150px;

background:url(img34.gif) no-repeat;

}

#btn_offOn a{

display:block;zoom:1;height:24px;

position:relative;right:-16px;

background:url(tip.gif) no-repeat 100% 0;

}

(JS={

$:function(o){return typeof o=="string"?document.getElementById(o):o},

on:function(o,type,fn){

o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);

return JS.on},

move:function(who,attr,val,s,fn){

var fm=parseInt(who.style[attr])||0;

clearInterval(who['timer_'+attr]);

var iFx=(function(form,to,s){

return function (){

return form+=Math[form

})(fm,val,s);

who['timer_'+attr]=setInterval(function (){

var v=iFx();

who.style[attr]=v+'px';

if(v==val){ fn&&fn.call(who);clearInterval(who['timer_'+attr]);};

},18);

}

}).on(window,'load',function (){

var Q=JS.$('fx_topToolbar');Q.style.top='-74px';

JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0)})

(Q,'mouseout',function (){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)})

(Q,'mouseover',function (){clearTimeout(this.outTimer)});

})