JS实现一个动态下拉菜单栏

 

1 引言   

一段时间里,经常在网上的技术论坛中看到有朋友提问怎样用JS来实现一个动态的下拉弹出式的菜单栏,我个人觉的这种功能的实现,现在已经不是难题了,在网上搜一下,各种各样实现的方式都有,成型的代码皆是，那为什么还有这么多人再网上苦苦搜询实现的方法呢？我在读完了网上若干个实现这类功能贴子之后，终于知道原委，这些贴子只道出了代码，而没有道清实现的原理，堆砌的代码把那些初学者或是由于工作原因不得不出赶任务的人搞的一头雾水。我这里从原理的角度和简短的代码来说说这个功能的实现方式，希望给那些迷惘的人一些启发。

2 实现原理

    主要的原理是利用浮动层<DIV>的可显示与隐藏，具备相对位置的属性的特性。

3 实现关键思路

  1）确定菜单栏的菜单数，定义两个二维数组，一个用来存贮主菜单对象，另一个用来保存子菜单对象。

  2）创建菜单标题栏（MenuBar)，再为每个菜单创建（Menu)，MenuBar和Menu可用DIV菜单内部用TABLE进行布局。

  3）MenuBar层要增加onMouseOver、onMouseOut事件，鼠标移到MenuBar上时，判断当前哪个标签，弹出该标签对应的菜单，并隐藏其它标签的子菜单。

  4)  MenuBar和Menu可以编辑成JS对象进行调用。

4 模拟菜单的样式解释
   菜单弹出——DIV的visibility = visiable;
    菜单弹出——DIV的visibility = hidden;

以上描述如有出入，请谅解！