Web页面下拉菜单的一种实现方法

　　 利用DHTML可以为Web页面加入动态效果，而且这可能还是DHTML最为常见的应用之一。然而这绝不是DHTML唯一的应用，利用DHTML还可以使得页面具有更好的可用性和更加直观。例如，我们可以用DHTML为Web网站加入一个下拉式菜单。尽可能地采用用户熟悉的界面元素，这是一个设计良好的用户界面必须遵循的基本原则之一。下拉式菜单可以在操作系统和其他许多应用系统见到，是用户最为熟悉的界面元素。

　　 与按钮菜单相比，下拉式菜单适合于提供更多的命令。本文的下拉式菜单示例程序仅使用客户端JavaScript脚本，只包含一个HTML文件menu.htm，其外观如下：
　　

　　 menu.htm的BODY区包含两个< DIY >标记：第一个是“文件”菜单，第二个是“搜索” 菜单。这两个标记都包含了一些HTML链接（这些链接表明单击菜单命令后显示的页面），但页面刚装载时，这些链接是不可见的，因为这些< DIY >的初始位置在窗口上面的-90px处，此时用户只能看到菜单的名字。为了让用户看到菜单的内容，程序必须将该菜单的位置重新设置为-5px，此时就相当于把菜单内容拉到浏览器窗口内了。在本实现中，把菜单拉下和隐藏都由toggleMenu()函数实现，toggleMenu()函数原型如下：
　function toggleMenu(目标菜单,菜单的新位置)

　　 在实际使用中，用户可能用以下两种方法之一改变菜单状态。第一，如果把鼠标移到菜单上面，浏览器就会执行MouseOver事件句柄，在这个事件句柄内可以实施菜单下拉操作（调用toggleMenu()函数），这种方法仅对支持标记内事件的浏览器（比如IE）有效。第二，用户可以单击菜单名字改变菜单状态，这种方法对所有浏览器有效。

　　 总共有三种情形需要调用toggleMenu函数，即用户单击菜单、鼠标进入、鼠标离开。用户单击“文件”、“搜索”菜单时必须切换菜单状态：此时如果菜单拉下了，就要把它隐藏起来；反之，则要把它拉下来。在另外两种情况下，就不必再判断是隐藏还是拉下菜单：如果是mouseOver事件，则拉下菜单；如果是mouseOut事件，则隐藏菜单。在后面两种情况下，传递给toggleMenu()的第二个参数指明了菜单的新位置。

　　 在所有上述三种情况下，传递给toggleMenu()的第一个参数表明了需切换状态的菜单的名字。toggleMenu()函数的第一个任务是初始化一个名为menuObj的变量。具体的初始化方法与浏览器的文档对象模型（DOM）有关：如果存在document.all，则用户的浏览器是IE，设置菜单时使用document.all.element.style属性；否则使用document.element属性。
　menuObj = (document.all) ? eval("document.all." + currElem + ".style") :

　    eval("document." + currElem)

　　 其次，toggleMenu()还必须知道菜单的新位置。如果调用该函数时使用了第二个参数（即本次调用由mouseOut或mouseOver事件发出），第二个参数就是菜单的新位置。如果只用一个参数调用toggleMenu()，则菜单新位置与其当前位置相反：
　if (toggleMenu.arguments.length == 1)

　    nextPos = (parseInt(menuObj.top) == -5) ? -90 : -5

　　 toggleMenu()的最后一个任务是通过DOM设置的新位置：

　if (document.all)

　    menuObj.pixelTop = nextPos

　else

　    menuObj.top = nextPos