按钮菜单可以在许多网站见到,比如Microsoft的SQL Server网站。当鼠标移到菜单按钮上时,它会浮起来,按下鼠标键时菜单按钮会向下凹陷。下图是这种菜单的实际效果,左边是SQL Server网站的菜单,下图是本文实例。
这种菜单可以用JavaScript和CSS制作。为方便起见,这里我们要用到ASP。
本例共有六个文件,请从本文页面底部的链接下载这些文件。这六个文件是:
(一) SamplePage.asp:这是本例显示菜单的页面。
设所有代码在本地服务器inetpubScripts目录下,则用http://localhost/Scripts/SamplePage.asp可以打开上图所显示的示例菜单?br> SamplePage.asp用#Include命令引用menu.asp生成菜单。
(二) Menu.asp:调用Functions.inc中的函数生成菜单。具体调用方法参见下文说明。
(三) Menu.css:该文件包含了按钮所有状态的样式定义。按钮共有四种类型:正常,正常子菜单,选择状态,选择状态子菜单。其中“选择状态”是指按钮文本前面带一个圆点,子菜单是指文本缩进一定距离。每种按钮有各种不同状态,例如鼠标悬停时的浮起状态,鼠标按下时的凹陷状态,等等。可以为所有按钮的各种状态分别定义样式。改变这里样式的颜色也即改变了菜单的颜色。
(四) Menu.js:这是客户端脚本代码。这里的代码负责响应鼠标事件,改变按钮的外观。其中RaiseButton()函数升高按钮,DepressButton()函数压下按钮。
(五) linenavdns.gif:这是高度为2 pixel的图形,用于分隔菜单按钮。它和< HR>差不多,但似乎更好看一点。如果改变了菜单的背景颜色,必须同时改变这个图形的颜色。
(六) functions.inc:服务器端脚本。functions.inc总共包含5个VBScript子过程,分别用来输出前面介绍的四种按钮和菜单分隔符linenavdns.gif。如果在menu.css中改变了按钮文本的颜色,同时也要改变这里的一些函数。参见下文具体说明。