分享
 
 
 

ASP按钮菜单制作实例

王朝asp·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

按钮菜单可以在许多网站见到,比如Microsoft的SQL Server网站。当鼠标移到菜单按钮上时,它会浮起来,按下鼠标键时菜单按钮会向下凹陷。下图是这种菜单的实际效果,左边是SQL Server网站的菜单,右图是本文实例。

这种菜单可以用JavaScript和CSS制作。为方便起见,这里我们要用到ASP。本例共有六个文件,请从本文页面底部的链接下载这些文件。这六个文件是:

㈠SamplePage.asp:这是本例显示菜单的页面。设所有代码在本地服务器inetpubScripts目录下,则用http://localhost/Scripts/SamplePage.asp可以打开上图所显示的示例菜单。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,菜单外观会有所改变,但菜单基本功能还是正常的。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有