特性：

更好的外观：在菜单标题上添加了图标。

更好的动作：实现了菜单的滑入，滑出效果。

更易的使用：添加了许多注释，方便使用。

当然还存在一些没有发现的问题。盼望大家指教：）

实现折叠式动态改变style.height的值 这样不是很专业：） 不过很像了！

100%的原装winXP折叠菜单的外观！如果不一样您提出来我改。

（qq2006 在点击的时候还有一些抖动。）

先看图最新添加了 qq2006 的外观

测试网页的地址：navbar.htm

详细网址：http://lxbzj.com/showartical.asp?N_id=156

下载：http://lxbzj.com/upload/200604/menu.zip

新版本还在制作中。。。（更新的js在19层）

这里是2006-04-13日修改过的js

-不再需要在每一个<a>里面添加onclick和onkeypress了这样网页和js进一步的分离

-定义了一个menu类负责将事件添加到每一个菜单里面

-修改了onkeypress

-添加interval处理

-添加了一个收起的加速度（不过不是很明显）

-添加了Navbar对象，实现在一组menu中只有一个能打开

-新js不断更新中。。。

+-navbar.js中的代码：

复制代码 代码如下:

//JavaScriptDocument

/*========================================

*文件名：navbar.js

*编码：Utf-8

*功能：实现菜单折叠的javaScript

*作者：雷晓宝

*版本:2.3

*时间：2006-03-07

===========================================*/

//========================定义menu类==================;

functionMenu(head,child,dir,speed,init_state,ext_on,ext_off)

{

this.head=document.getElementById(head);//菜单头

this.body=document.getElementById(child);//菜单体

this.direction=dir;//菜单收起的方向

this.speed=speed;//速度

this.ext_on=ext_on;//扩展菜单展开调用

this.ext_off=ext_off;//扩展菜单收起调用

this.init_state=init_state;//设置菜单的初始状态true/false

this.a=10;//加速度

//私用变量;

this._interval=false;

this._last_state=false;

this._size=false;

this._temp=false;

this._js=false;

this._div=false;

this._parent=false;

this._parent_control=false;

varself=this;

vartemp=newArray(null,null);//temp[0]用来给_off()用，temp[1]用来给_on()用

//=============================方法=============================

//点击事件处理

this.click=function(e)

{

if(self._parent_control)

{

self._parent._control(self);

returnfalse;

}

else

{

Interval.clear(self._interval);

if(self._last_state==false)

{

self._on();

returnfalse;

}

else

{

self._off();

returnfalse;

}

}

}

//初始化

this.init=function()

{

this.head.onclick=this.click;

this.head.onkeypress=function(e)

{

e||(e=window.event);

if(!(e.keyCode==32||e.keyCode==0))return;

//alert(':)');

self.click();

}

for(vari=0;i<this.body.childNodes.length;i++)

{

if(this.body.childNodes[i].nodeType==1)

{

this._div=this.body.childNodes[i];

break;

}

}

if(parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height

{

this._size=parseInt(this.body.style.height);

}

else

{

this._size=this._div.offsetHeight;

}

switch(this.init_state)

{

casetrue:

if(this.body.style.display=='none')

{

//this._last_state=false;

this._on();

}

else

{

this._last_state=true;

}

break;

default://casefalse:

if(this.body.style.display!='none')

{

this._last_state=true;

this._off();

}

break;

}

}

//展开菜单

this._on=function()

{

if(self._last_state==false)

{

self._last_state=true;

self.body.style.display="";

temp[1]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;

if(isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";

if(self.ext_on)

{

self.ext_on(self.head,self.body)

}

self._interval=Interval.set(self._action_on,speed);

}

//setTimeout('slowon("'+self.body.id+'")',5)

}

//收起菜单

this._off=function()

{

if(self._last_state==true)

{

self._last_state=false;

//if(temp[0]==null)

//{

temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;;

//}

if(isNaN(parseInt(self.body.style.height)))self.body.style.height=self._size+'px';

if(self.ext_off)

{

self.ext_off(self.head,self.body)

}

self._interval=Interval.set(self._action_off,this.speed);

}

}

//以下处理滑动

this._action_on=function()

{

if(parseInt(self.body.style.height)+temp[1]>self._size)

{

self.body.style.height=self._size+'px';

Interval.clear(self._interval);

}

else

{

self.body.style.height=parseInt(self.body.style.height)+temp[1]+'px';

temp[1]+=self.a;

}

}

this._action_off=function()

{

if(parseInt(self.body.style.height)-temp[0]<0)

{

Interval.clear(self._interval);

self.body.style.display="none";

}

else

{

self.body.style.height=parseInt(self.body.style.height)-temp[0]+'px';

temp[0]-=self.a;

}

}

}

//meanu类结束

//====================定义Navbar类，用来管理一组menu集合===============================

functionnavbar(dir,a,speed,ext_on,ext_off)

{

this.open_only_one=true;//这组menu在任何时刻是否只有一个在开启，true/false

this.dir=dir;//menu组的公共方向，既然是一组menu它们应该有相同的方向吧？

this.a=a;//menu公共加速度

this.speed=speed;//公共速度

this.ext_on=ext_on;//公共扩展打开函数调用

this.ext_off=ext_off;//公共的扩展收起函数调用

this.menu_item=newArray();//menu组

this._openning;//如果只允许打开一个菜单，这个就会记录当前打开的菜单

this.open_all=function()//

{

};

this.add=function(head,body)//添加menu的函数

{

vartemp=newMenu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);

this.menu_item.push(temp);

};

this.init=function()//Navbar的初始化函数，必须在add完成后调用

{

if(this.open_only_one==true)

{//如果只允许一个打开，那么仅仅设置菜单组的第一个菜单为打开状态

if(this.menu_item.length>0)

{

with(this.menu_item[0])

{

init_state=true;

_parent=this;//设置menu的父亲为这个Navbar

_parent_control=true;//设置父亲来控制菜单

init();

}

this._openning=this.menu_item[0];

}

for(vari=1;i<this.menu_item.length;i++)

{//设置出第一个外的其他菜单为关闭，同时设置好其他参数

with(this.menu_item[i])

{

init_state=false;

_parent=this;

init();

_parent_control=true;

}

}

}

else

{//如果open_only_one==false那么仅仅初始化菜单

for(vari=0;i<this.menu_item.length;i++)

{

this.menu_item.init();

}

}

};

//额外添加的父亲控制函数

this._control=function(child)

{

varself=child;

Interval.clear(self._interval);

if(self._last_state==false)

{

if(typeof(self._parent._openning)=='object')

{

self._parent._openning._off();

self._parent._openning=self;

}

self._on();

returnfalse;

}

else

{

//self._off();

returnfalse;

}

}

}//Navbar类结束

//===============================interval处理=============================

//注意：_stack只有20个

//扩充时必须赋初值1-n

Interval=

{

length:20,

_action:newArray(length),

_stack:newArray(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),

_interval:Array(length),

_timeout:newArray(length),

//for(vari=0;i<_action.length;i++)stack.push(i);,

set:function(action_function,speed,time_out)

{

time_out=time_out?time_out:15000;//默认的interval超时为15000秒，如果不需要设置超时，那么将下面的setTimeout那移行注释掉;

varp=Interval._stack.pop();

if(p)

{

Interval._action[p]=action_function;

Interval._interval[p]=setInterval('if(Interval._action['+p+'])Interval._action['+p+']();',speed);//这里的重复执行函数不能写成'Interval._action['+p+']'因为很可能Interval.clear以后，还有一次没有执行完毕，于是就产生了一次错误

Interval._timeout[p]=setTimeout('Interval.clear('+p+')',time_out);//这行设置interval超时,如果不需要可注释掉;

returnp;

}

},

clear:function(p)

{

if(Interval._action[p])

{

clearInterval(Interval._interval[p]);

clearTimeout(Interval._timeout[p]);//这行清除interval超时,如果没有设置超时可注释掉;

Interval._action[p]="";

Interval._stack.push(p);

}

}

}

//Interval处理结束