XP折叠菜单&仿QQ2006菜单

答案：特性：

更好的外观：在菜单标题上添加了图标。 
更好的动作：实现了菜单的滑入，滑出效果。 
更易的使用：添加了许多注释，方便使用。 

当然还存在一些没有发现的问题。盼望大家指教：）
实现折叠式动态改变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中的代码：
复制代码 代码如下:

// JavaScript Document 
/*======================================== 
*        文件名：        navbar.js 
*        编  码： Utf-8 
*        功  能：实现菜单折叠的javaScript 
*        作  者：雷晓宝 
*        版  本: 2.3 
*        时  间：2006-03-07 
===========================================*/ 
//========================定义menu类==================; 
function Menu(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; 
    var self = this; 
    var temp = new Array(null,null);//temp[0]用来给_off()用，temp[1]用来给_on()用 

//=============================方法============================= 
//点击事件处理 
    this.click = function(e) 
    { 
        if (self._parent_control) 
        { 
            self._parent._control(self); 
            return false; 
        } 
        else 
        { 
            Interval.clear(self._interval); 
            if (self._last_state == false) 
            { 
                self._on(); 
                return false; 
            } 
            else 
            { 
                self._off(); 
                return false; 
            } 
        } 
    } 

//初始化 
    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(var i=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) 
        { 
            case true: 
                if (this.body.style.display == 'none') 
                { 
                    //this._last_state = false; 
                    this._on(); 
                } 
                else 
                { 
                    this._last_state = true; 
                } 
                break; 
            default://case false: 
                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类结束 

//======

上一个：取得一定长度的内容，处理中文
下一个：不错的新闻标题颜色效果