您当前的位置: 首页 » ASP/ASP.NET编程 » ASP按钮菜单制作实例
ASP按钮菜单制作实例
论坛链接
按钮菜单可以在许多网站见到，比如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中改变了按钮文本的颜色，同时也要改变这里的一些函数。参见下文具体说明。
如前所述，本例实际画出菜单的代码在menu.asp中，下面具体说明菜单中各种按钮的创建方法。我们已经知道，按钮总共有四种类型，本例用到了所有这四种按钮。前图中最上面的一个按钮“命令1”属于第一种按钮类型，用下面这行代码创建：
call drawMenu(按钮文本,目标URL)
实际使用时改变调用参数即可。
第二个按钮文本“命令1-1”是缩进的（第二类按钮），和最后一个按钮“命令2-2”一样，用下面这行代码创建：
call drawSubMenu(按钮文本,目标URL)
示例菜单中的按钮分隔用的是Linenavdns.gif，这个图形可以用如下代码加入任何两个按钮之间：
call drawMenuSeperator()
第三个按钮前面有一个橙色圆点（即选择符号，这是第三类按钮）。这个按钮用如下代码加入：
call drawChsnMenu (按钮文本,目标URL)
第四个按钮文本缩进且带圆点（第四类按钮），加入该按钮的代码如下：
call drawChsnSubMenu (按钮文本,目标URL)
下面说明一下如何定制菜单的颜色。颜色定制有点麻烦，这里只说明其经过，具体请读者自己下载代码试验。如果要改变菜单的背景色，首先要改变menu.asp中表格的背景色，其次是要修改menu.css中的所有的背景颜色和边框颜色。如果改变了按钮的文本颜色，必须同时改变functions.inc中各函数所输出的< FONT>标记的“color=”部分。
最后还要说明一下：对于不支持CSS或JavaScript的用户，这个菜单也是可用的。如果不支持JavaScript，则按钮不会出现浮起、凹陷效果；如果不支持CSS，菜单外观会有所改变，但菜单基本功能还是正常的。
这种菜单可以用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中改变了按钮文本的颜色，同时也要改变这里的一些函数。参见下文具体说明。
如前所述，本例实际画出菜单的代码在menu.asp中，下面具体说明菜单中各种按钮的创建方法。我们已经知道，按钮总共有四种类型，本例用到了所有这四种按钮。前图中最上面的一个按钮“命令1”属于第一种按钮类型，用下面这行代码创建：
call drawMenu(按钮文本,目标URL)
实际使用时改变调用参数即可。
第二个按钮文本“命令1-1”是缩进的（第二类按钮），和最后一个按钮“命令2-2”一样，用下面这行代码创建：
call drawSubMenu(按钮文本,目标URL)
示例菜单中的按钮分隔用的是Linenavdns.gif，这个图形可以用如下代码加入任何两个按钮之间：
call drawMenuSeperator()
第三个按钮前面有一个橙色圆点（即选择符号，这是第三类按钮）。这个按钮用如下代码加入：
call drawChsnMenu (按钮文本,目标URL)
第四个按钮文本缩进且带圆点（第四类按钮），加入该按钮的代码如下：
call drawChsnSubMenu (按钮文本,目标URL)
下面说明一下如何定制菜单的颜色。颜色定制有点麻烦，这里只说明其经过，具体请读者自己下载代码试验。如果要改变菜单的背景色，首先要改变menu.asp中表格的背景色，其次是要修改menu.css中的所有的背景颜色和边框颜色。如果改变了按钮的文本颜色，必须同时改变functions.inc中各函数所输出的< FONT>标记的“color=”部分。
最后还要说明一下：对于不支持CSS或JavaScript的用户，这个菜单也是可用的。如果不支持JavaScript，则按钮不会出现浮起、凹陷效果；如果不支持CSS，菜单外观会有所改变，但菜单基本功能还是正常的。