ASP按钮菜单制作实例

按钮|菜单|按钮|菜单

 按钮菜单可以在许多网站见到,比如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,菜单外观会有所改变,但菜单基本功能还是正常的。

时间: 2025-01-18 05:53:30

ASP按钮菜单制作实例的相关文章

CSS绿色导航菜单制作实例

  网站上的菜单大部分都是由CSS来实现的,不管是带动画效果,或是不带动画效果,不管是一级菜单或是多级菜单,不管是横向菜单,也不管是竖向菜单,几乎都与CSS关系密切.现在用CSS代码实战一款简洁的绿色导航菜单,是一个基本型菜单,没有使用jQuery,也没有加入动画效果,目的是让CSS新手学会如何制作一个简单的CSS菜单. 先来帖CSS菜单的代码,为了便于理解,这里在关键的地方都加入了注释. CSS代码写好了,先保存为menu.css文件,下面要引入这个文件,将CSS应用到对像上,下面就是对网页上

Bootstrap菜单按钮及导航实例解析_javascript技巧

下拉菜单 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-tog

简单的ASP统计制作实例_应用技巧

我做了一个网站,当然啦,跟大家一样,也摆了个计数器在上面,每天看计数器都在不断的翻,心里很高兴,不过后来我又想,到底是谁看了我的网站啊?是新朋友还是老朋友啊?也不知他们来了多少次,我还想给他们都编上号,于是我申请了 免费统计,不过一连换了N个都不满意,唉,看来,只有自己动手才能丰衣足食了,说干就干,还望高手笑话之于,不访指教. 我以ACCESS库为例子,其实用SQL SERVER库也只要改一下链接库的语句就得啦,库结构如下 库文件名: CONT.ASP 本来是CONT.MDB但在建好后把扩展名改

跟我学做最强功能的网站统计,一个ASP统计制作实例

统计 一个能对访问者进行编号.记录访问次数.IP.时间的统计制作实例 我做了一个网站,www.zydn.net  当然啦,跟大家一样,也摆了个计数器在上面,每天看计数器都在不断的翻,心里很高兴,不过后来我又想,到底是谁看了我的网站啊?是新朋友还是老朋友啊?也不知他们来了多少次,我还想给他们都编上号,于是我申请了 免费统计,不过一连换了N个都不满意,唉,看来,只有自己动手才能丰衣足食了,说干就干,水平臭臭,还望高手笑话之于,不访指教. 我以ACCESS库为例子,其实用SQL SERVER库也只要改

一个ASP统计制作实例

统计 一个能对访问者进行编号.记录访问次数.IP.时间的统计制作实例 我做了一个网站,www.zydn.net 当然啦,跟大家一样,也摆了个计数器在上面,每天看计数器都在不断的翻,心里很高兴,不过后来我又想,到底是谁看了我的网站啊?是新朋友还是老朋友啊?也不知他们来了多少次,我还想给他们都编上号,于是我申请了 免费统计,不过一连换了N个都不满意,唉,看来,只有自己动手才能丰衣足食了,说干就干,水平臭臭,还望高手笑话之于,不访指教. 我以ACCESS库为例子,其实用SQL SERVER库也只要改一

使用bootstrap如何制作导航栏自适应后连接变成按钮菜单?

问题描述 使用bootstrap如何制作导航栏自适应后连接变成按钮菜单? 我用bootstrap框架做了一个导航栏,但自适应后很难看,我想浏览器窗口变小后, 导航栏能自适应,连接那些变成汉堡菜单,我应该怎么做?上网找插件?还是bootstrap 自带这种用法? 解决方案 bootstrap本来就能自适应的,你是不是没设置自适应 解决方案二: bootstrap本来就能自适应的,你是不是没设置自适应 它自适应了 只是自动压到下一行,没有变成汉堡菜单. 解决方案三: bootstrap本来就能自适应

简单实用的FLASH导航菜单制作

菜单|导航 相信大家都对现在的FLASH导航情有独钟,但是对一些的FLASH特效望尘莫及(我就是其中一位:),特别是复杂的AS动作脚本.不过,通过自己的学习发现,一些很难理解的程序可以通过简单的AS动作脚本表现出同样的效果,今天我就来讲一个例子,可以让一些和我一样的FLASH的初学者(懂基础AS动作脚本程序的FLASHER)!希望大家有所体会,有所收获. 预览: 源文件下载 先来说说知名的<闪客帝国>的导航栏: 这种效果的导航栏在国内国外的例子很多的,很实用!只不过他们表现的形式不一样罢了,比

ASP动态网页制作技术经验分享_应用技巧

学好一门编程语言有两个条件是必不可少的,一是理论与实践结合.在实际例程去验证书本上的理论能加深你对理论的理解:二是学会总结,把学习.运用中的心得体会记下来,当成一种经验或者教训加以提炼并在日后的应用中加以改进,一定能提高你对这门编程语言的认识.以下是笔者在学习与运用ASP编程中的两点经验,希望能对大家有所帮助. ASP页面内VBScript和JScript的交互 ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数.ASP开发环境提供了两种脚本引擎,即VB

jQuery+CSS3实现四种应用广泛的导航条制作实例详解_jquery

导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航