XP折叠菜单&仿QQ2006菜单

特性:

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

当然还存在一些没有发现的问题。盼望大家指教:)
实现折叠式动态改变style.height的值 这样不是很专业:) 不过很像了!

100%的原装winXP折叠菜单的外观!如果不一样您提出来我改。
(qq2006 在点击的时候还有一些抖动。)

先看图最新添加了 qq2006 的外观
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.lxbzj.com/upload/200512/navbar2.png');}" alt="" src="http://www.lxbzj.com/upload/200512/navbar2.png" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://www.lxbzj.com/upload/200604/qq2006.png');}" alt="" src="http://www.lxbzj.com/upload/200604/qq2006.png" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
测试网页的地址: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类结束

//====================定义Navbar类,用来管理一组menu集合===============================
function navbar(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 = new Array();//menu组
    this._openning;//如果只允许打开一个菜单,这个就会记录当前打开的菜单
    this.open_all = function()//
    {
    };
    this.add = function (head,body)//添加menu的函数
    {
        var temp = new Menu(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(var i = 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(var i = 0;i<this.menu_item.length;i++)
            {
                this.menu_item.init();
            }
        }
    };
//额外添加的父亲控制函数
    this._control = function(child)
    {
        var self =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();
            return false;
        }
        else
        {
            //self._off();
            return false;
        }
    }

}//Navbar类结束

//===============================interval 处理=============================
//注意:_stack 只有20个
//扩充时必须赋初值1-n
Interval=
{
    length:20,
    _action : new Array(length),
    _stack : new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),
    _interval : Array(length),
    _timeout: new Array(length),
    //for(var i=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 那移行注释掉; 
        var p = 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超时,如果不需要可注释掉;
            return p;
        }
    },
    clear:function(p)
    {
        if (Interval._action[p])
        {
            clearInterval(Interval._interval[p]);
            clearTimeout(Interval._timeout[p]);//这行清除interval超时,如果没有设置超时可注释掉;
            Interval._action[p] = "";
            Interval._stack.push(p);
        }
    }
}
//Interval 处理结束

(0)

相关推荐

  • XP折叠菜单&仿QQ2006菜单

    特性: 更好的外观:在菜单标题上添加了图标. 更好的动作:实现了菜单的滑入,滑出效果. 更易的使用:添加了许多注释,方便使用. 当然还存在一些没有发现的问题.盼望大家指教:)实现折叠式动态改变style.height的值 这样不是很专业:) 不过很像了! 100%的原装winXP折叠菜单的外观!如果不一样您提出来我改.(qq2006 在点击的时候还有一些抖动.) 先看图最新添加了 qq2006 的外观screen.width*0.7) {this.resized=true; this.width

  • JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • Android高手进阶教程(二十六)之---Android超仿Path菜单的功能实现!

    Hi~大家好,出来创业快3个月了,一切还不错,前一段时间用了业余时间搞了个问答类网站YQMA.想做中国的stackoverflow,哈哈,只是YY下,希望大家多多支持! 好了,今天给大家分享的是Path菜单的简单实现,可以支持自定义方向(左上,右上,右下,左下),并且可以自定义菜单的个数,难点就是菜单的摆放位置(动态设置margin),还有动画的实现,其实动画只是简单用了个TranslateAnimation,N个菜单一起移动的时候感觉很cool~ 这里也用到了自定义标签,这里不懂的童鞋可以看我

  • 微信小程序开发之圆形菜单 仿建行圆形菜单实例

    建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({ data: { userInfo: {}, menuList: {},//菜单集合 animationData: {}, startPoint: {},//触摸开始

  • JS实现多级菜单中当前菜单不随页面跳转样式而发生变化

    一.概述 本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,貌似没看懂啥意思? 看图说话:就是点二级或多级菜单时,父级展开,当前菜单是被选中状态,这下明白了吧? 二.应用场景 当一个项目使用公共模板文件时(如上图的左侧菜单栏),我们给每个子菜单添加链接时,点击页面跳转样后还是公共模板的样式,这时就需要实现动态加载当前菜单的样式. 三.实现方法 第一种:.通过php传递变量,模板页面通过接收这些变量来实现当前页面的菜单选中与否,父级展开等这些样式 缺点:虽然实现简单,但是每

  • WordPress中注册菜单与调用菜单的方法详解

    register_nav_menus()(注册菜单) register_nav_menus() 函数用来注册一个菜单,菜单指的是 WordPress 3.0+ 的菜单管理器,注册之后用户就可以在菜单管理器里拖动生成导航菜单了. 用法 register_nav_menus( $locations ); 参数 $locations (数组)(必须)要注册的菜单,键值为菜单 ID,键名为菜单名称,可以一次创建多个. 默认值:None 返回值 该函数无返回值. 例子 /** *建立菜单 *http://

  • 在WordPress的后台中添加顶级菜单和子菜单的函数详解

    添加设置页面-add_menu_page函数 add_menu_page(),这个函数是往后台添加顶级菜单先,也就是和"外观"."插件"等一样的顶级菜单. 函数介绍如下: <?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); //page_title页面title标签信息 //$menu_title 菜

  • BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="

  • 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

    一.手风琴菜单效果图及代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果制作</title> <link rel="stylesheet" href="../css/reset.css"> <style> .con{ wi

随机推荐