Javascript滑动菜单(一)

一、开篇

在研究CS08的时候,看到后台管理的Dashboard滑动按钮做得很漂亮,于是自己就动手写了一个,在这里与大家分享。菜单展开可以是鼠标点击按钮,也可以是鼠标移动到按钮上,在这里先介绍鼠标点击的这种菜单。

二、原理


基本原理很简单,就是将需要滑动的菜单放在一个overflowhidden的容器里,然后控制菜单相对于容器的top属性,实现下拉的效果。

但是实际上也没这么简单,因为要遇到很多问题,比如容器的大小如何控制、容器如何确定位置、容器应该何时出现(如果容器一直存在,则会挡住容器下面的元素)。这些问题是怎么解决的,在下一部分的代码里会有注释说明。在这里说明一下大概的原理:

1、首先在页面载入时,要给菜单加上一个外框,就是上图中的menuContainer,这个框的作用就是遮挡menu。页面载入后,让menu的visibility为hidden,这时用户看不到菜单,但是我们可以获得menu的长和宽,将这个值赋给menuContainer的长和宽(此时menuContainer的display为block,要不然根本就没法赋值),然后将menuContainer的display设置为none。

 

2、当鼠标点击按钮时,根据按钮的位置来确定下拉菜单的位置,将menuContainer的display设置为block后,就可以控制menu的top属性(menu的position为absolute)实现滑动。

 

3、在滑动的过程当中,不能有按钮的事件或者document关于菜单的事件被注册,这样会影响滑动的过程。所以滑动之前删除注册,滑动结束过后重新注册事件。

 

4、当菜单展开的时候,点击按钮时菜单会收回,这里巧妙的用到了事件的冒泡。菜单展开的时候,根据if(isOpened)return;这一句来看,就像点击按钮不起作用一样,点击按钮的事件会冒泡到document,而此时document恰好注册有关闭菜单的方法,从而实现了再次点击按钮关闭菜单的目的。

三、代码

注意:这里用到了关于事件的一个简单框架和几个其他函数,具体的可以下载示例后看源文件。 也可以看我之前写的博客文章进行了解。

SlideMenu

      这是菜单类的主要代码,下面是使用方法

window.onload = function(){
    
new SlideMenu($("btn1"),$("menu1"));
}

      即在实例化时传入两个对象到构造函数,前一个参数是菜单按钮对象,后一个参数是需要展开的菜单的对象。

四、下载

      点此下载示例

posted @ 2008-09-04 00:49  LongWay  阅读(4922)  评论(4编辑  收藏  举报