动态下拉菜单

2024-10-29

动态下拉菜单（共4篇）

动态下拉菜单篇1

一、引言

Internet的普及使得越来越多的人参与到网络中去, 社交网站也因此兴起。大多数的社交网站都采用了简明的设计风格, 这要求它们能有一个功能强大、外观简单又易于操作的菜单导航条。从人人网、新浪微博等网页上不难看出, 首页的菜单既要有连接网站大部分功能的接口, 又需要为已登录的用户提供特定的消息, 这与以往的门户网站是不同的。

动态下拉菜单, 顾名思义, 就是能够根据不同用户的登录信息, 显示出不同内容的下拉菜单, 从而实现动态的效果。ASP.NET提供了基础的网站导航控件——Menu控件, 我们可以通过动态地添加MenuItem来填充菜单, 从而形成一个完整的下拉菜单。

二、设计思路

本文根据现有的一些社交网站的导航菜单, 仿照其功能, 用Menu控件来实现一个较为完整的动态下拉菜单。下拉菜单除包含“首页”、“应用”等菜单项外, 还需要动态显示已登录用户未读的“消息”和“请求”。

在SQL Server 2005中创建一个简易的数据库, 只含有三张表, 即user、message和request。message和request表都以其ID为主键, userID为外键, 并含有time (时间) 、summary (消息或请求的简要说明) 、url (具体页面的连接) 以及flag (标记已读) 四个字段。当生成一条新的消息时, flag自动设置为1, 阅读过后, flag变为0。

ASP.NET提供了DataSet类, 它是非连接数据访问的核心。DataSet包含了零个或多个表的集合, 这个集合里的每个项目是一个DataTable。同时, ASP.NET还提供了DataAdapter类用于建立DataTable和数据源之间的桥梁, 它含有查询和更新数据源所需的全部命令。当页面初始化时, 自动查询数据库中表message和request中的内容, 并通过DataAdapter将所查询到的结果集填入DataSet。

DataView为DataTable对象定义了一个视图, 相当于提供了一种对DataTable中的数据进行自定义的过滤和排序的途径。由于数据库表中的条目并不一定完全按照时间先后的顺序排列, 又为了方便用户查看, 我们需要将查询结果按时间顺序排列之后再输出。因此, 要利用DataView排序DataTable中的数据, 然后添加至Menu控件中, 使其成为其中的一项。

三、动态下拉菜单实现

1. 外观

一个好的SNS网站导航菜单, 一般来说会置于页面顶端, 不随页面的滑动而滑动。并且, 为了美观, 我们希望菜单能够居中显示, 而菜单条又能撑满整个浏览器页面, 不受显示器屏幕大小及浏览器种类的限制。这就需通过设置CSS样式表来控制, 有关菜单的CSS代码如下:

2. 静态的下拉菜单

除了“消息”、“请求”需要根据已登录的用户信息动态显示下拉菜单中的内容外, 其余的下拉菜单均是固定不变的, 可以直接通过Menu控件的“编辑菜单项”来编辑。

Menu类定义了两组平行的样式, 一组定义静态项, 另一组定义动态项。为了美观, 这里用到2种样式, 即StaticHoverStyle、DynamicHoverStyle, 用于设置用户鼠标停留时菜单项的外观, 和StaticMenuItemStyle、DynamicMenuItemStyle, 用于设置单个菜单项的外观。设置Menu样式的部分代码如下:

S t a t i c H o v e r S t y l e和StaticMenuItemStyle的设置类似, 完成后效果如图3-1。

3. 动态的下拉菜单

动态下拉菜单内的菜单项, 均需要从数据库中读取, 然后显示在页面上。为了方便起见, 假定用户已登录, 在SQL查询语句中使用的用户名为常量。在实际情况下, 可换成session的值。

从数据库中读取的数据, 存入DataSet类的对象ds中, 通过DataView的Sort属性来对数据进行排序。由于读取的数据为“消息”和“请求”的具体条目, 需要按时间顺序从后往前显示, 所以对time字段进行排序, 再从后往前依次添加至Menu中。实际情况中, 应该对MenuItem设置链接的, 此处为了方便, 故省略了。

在页面对应的cs代码文件中, 先定义需要用到的变量, 如下:

变量定义好后, 在Page_Load (object sender, EventArgs e) 事件中编写关于查询数据库和添加菜单项的代码, 部分代码如下:

四、结束语

动态下拉菜单俨然已是社交网站中必不可少的一部分。本文采用CSS和ASP.NET相结合所设计的下拉菜单, 实现了动态下拉菜单的基本功能, 可以如实地反映数据库中的信息。ASP.NET提供的Menu控件、DataSet类、DataAdapter类等使得整个菜单的设计制作过程变得更加简单, 也使得所设计的菜单能够有较高的可扩展性和可移植性。

在实际应用的过程中, 可以专门设置CSS文件, 应用到Menu控件中去, 来提高菜单的美观性, 或是利用JavaScript技术, 来提高用户体验的满意度。而在菜单性能方面, 可以设置一个触发事件, 当数据库中的message表和request表中有新的数据插入时, 自动更新菜单项。这样可以做到实时的更新, 如果在登录的状态下出现新的信息, 那么用户就能够及时地获取。

摘要：随着网络的发展, 动态下拉菜单在网页设计中的应用越来越普遍。本文阐述了动态下拉菜单的主要功能及设计思路, 并利用CSS设计菜单的外观布局, 和ASP.NET中的Menu控件完成与数据库的连接、查询等, 动态地得到了一个个性化的下拉菜单。

关键词：ASP.NET,动态下拉菜单,CSS

参考文献

[1]MacDonald, M., Freeman, A., Szpus zta, M.Pro ASP.NET4in C#2010[M].Berkeley:Apress, 2010

[2]李春保, 喻丹丹, 曾慧, 曾平.ASP.NET动态网站设计教程:基于C#+SQL Server[M].北京:清华大学出版社.2011

[3]王大远.Div+CSS3.0网页布局案例精粹[M].北京:电子工业出版社.2011

[4]闫孝丽.基于数据库及ASP.NET的动态菜单实现[J].电脑编程技巧与维护.2011 (22) :63-64

APDiv制作下拉菜单详解篇2

1 将Dreamweaver系统打开使编辑窗口宽度和屏幕窗口宽度一样大小

2 布局导航栏并在导航栏中输入导航项文字

3 在导航项文字下方附近插入与导航项文字相对应的AP Div层并在层中布局下拉菜单的内容, 注意层的位置与导航项之间的距离

4 选中导航项文字, 建立空链接并为添加行为:鼠标指向导航项文字对应的下拉菜单就显示, 鼠标离开导航项文字对应的下拉菜单就隐藏

5 同样对于下拉菜单弹出的层也要添加行为:鼠标指向层, 本层就显示, 鼠标离开层, 本层就隐藏

6 保存预览, 如果发现下拉菜单不能被指向, 就要调小层和导航项之间的距离, 直到指向拉菜单

7 最后将层的属性设置为隐藏。 (将AP元素面板的眼睛闭上)

8 其他下拉菜单如法炮制

在制作过程中, 要点概括为导航项文字建立空链接并添加行为AP Div添加行为调整导航项文字与AP Div之间的距离AP Div的隐藏

大家动手做做吧, 一定会帮助到你。

摘要：根据实际图解, 展开对AP Div制作下拉菜单的论述。

动态下拉菜单篇3

PowerPoint是微软公司推出的Microsoft Office旗下的一款优秀幻灯片制作软件,它基于Windows平台开发,专门用于制作演示文稿,是目前最为流行且容易掌握的幻灯片制作软件,被广泛应用于设计和制作产品演示、广告宣传、会议流程、销售简报、业绩报告、电子教学、项目展示等各个领域[1]。使用PowerPoint,可以很方便地输入文字、插入表格、图片、组织结构图、音频、视频及Flash对象等。使用PowerPoint能让你的演示文稿图文并茂,有声有色。

在利用PowerPoint设计多媒体课件或者制作演讲稿的过程中,在演示的项目比较多且各项目间存在有层次关系的时候,为了增强演示文稿展示内容的层次感,可将演示的内容设计成下拉菜单的方式。

下拉菜单的设计,可采用很多软件实现。众所周知,利用二维动画设计软件Flash很容易设计下拉菜单,利用交互性较强的AuthorWare也很容易实现。能否用简单的PowerPoint设计下拉菜单?通过笔者的一番实践,答案是肯定的,而且设计方法较为简单,容易实现。下面详细介绍如何在PowerPoint中设计下拉菜单的具体方法。

1相关技术介绍

1.1触发器简介

触发器是PowerPoint幻灯片中自定义动画的一项,它可以是一个图片、图形、按钮,甚至可以是一个段落或文本框,单击触发器时它会触发一个操作[2]。该操作可以是动画、声音或者电影等。触发器类似于Flash或其它应用软件中的按钮,通过单击按钮控制PPT页面中已设定动画的执行。其主要用于创建交互式的幻灯片。

1.2动画设置

动画被称之为PPT鲜活的灵魂。为对象设置动画,这是演示文稿的精华。PPT的动画制作原理与Flash/gif/电影动画的原理不同,后者是通过一帧一帧的画面连续播放实现的。而PPT的动画主要通过自带的一些动画效果在一个固定的页面来实现,虽然PPT动画也有“帧”和页面切换的效果,但这些不是PPT的主流。PPT动画主要有两大类:自定义动画和页面切换动画[2]。

自定义动画又包括:进入动画、强调动画、退出动画、路径动画4种。

动画中“开始”选项的设置也非常关键,它的设置控制了整个动画显示的效果。“开始”选项有“单击时”、“之前”、“之后”3个可供选择的内容[3]。各个选项的含义如下所示:(1)单击:在幻灯片放映时,表示单击鼠标启动该动画;(2)之前:指在前一动画动作进行时本动画同时展开;(3)之后:指在前一动作结束之后,本动画才开始。

值得注意的是:在PowerPoint中,何时设置动画比较合适呢?一般情况下,建议先做PPT,最后设计动画,便于批量操作。对于复杂动画,有灵感时可先做动画。

在进行动画设置时,“开始”选项是设置“之前”还是“之后”,如何进行区分呢?其实如果要表示动作“同时”的话,就将其设置为“之前”,表示与前一动画同时进行,反之,就将其设置为“之后”。

动画的样式:代表进入动画,代表强调动画,代表退出动画,代表路径动画。

1.3超链接设置

使用PowerPoint提供的超链接功能,可以在幻灯片与幻灯片之间、幻灯片与其它外界文件或程序之间以及幻灯片与网络之间自由地转换。通过超链接随时跳转到指定的幻灯片、打开指定的网页或其它文件,从而增强演示文稿的交互性,强化演示效果[4]。

2 PowerPoint中下拉菜单的设计实现

2.1实现思路

打开PowerPoint 2003,根据设计需要利用绘图工具栏中的“矩形”画出菜单及下拉菜单,然后给各个下拉菜单添加文本,再根据各个下拉菜单的项设置好相应的内容后,进行动画的设置,设置完成后,将第一张幻灯片复制出若干张幻灯片,数目根据下拉菜单的数目来定。

总的来说,在PowerPoint中制作下拉菜单,可分成如下几个步骤:(1)设置下拉菜单的外形(利用“矩形”按钮);(2)添加菜单项;(3)设置进入动画;(4)为各个菜单项设置触发器;(5)设置退出动画;(6)添加多张幻灯片,并设置超链接。

2.2下拉菜单的实现

打开PowerPoint2003,新建一演示文稿,将幻灯片的内容版式改成空白。

2.2.1下拉菜单的外形设置

(1)设计菜单:单击“矩形”按钮,画出一个矩形,将其大小设置为:高度1.5cm,宽度5.5cm,位置:水平1.85cm,垂直1.7cm,选择适当的填充颜色。单击右键,添加文本“菜单”。

(2)设计弹出下拉菜单存放的容器。先画一个矩形,将其大小设置为:高度6.2cm,宽度5.2cm,再画另一个矩形,将其大小设置为:高度6cm,宽度5cm。将两个矩形的顶边和左边重合在一起,将其组合为一个对象。将它们的位置设置为:水平2.2cm,垂直3.2cm,选择适当的填充颜色。最后,将此组合对象移动到(1)中制作的矩形下面。

(3)设计下拉菜单各项内容存放的容器。画出一个矩形,将其高度和宽度分别设置为:5.2cm和8.2cm,将其位置设置为:水平10.9cm,垂直6.73cm。单击右键,添加文本“首页”。

2.2.2添加下拉菜单项

再画一个矩形框,将其大小设置为:高度1.2cm,宽度5cm,位置:水平2.2cm,垂直3.2cm,单击右键,添加文本“首页”。接着依次复制出4个矩形,高度、宽度及水平方向距左侧的距离都与第一个矩形相同,将垂直方向依次改为:3.2cm、4.2cm、5.2cm、6.2cm、7.2cm,依次添加文本“导入语”、“作者简介”、“演示主题”、“拓展延伸”。最后将这5个矩形移到“2.2.1”项中设计的组合对象中。具体的设置效果如图1所示。

2.2.3设置动画效果

接下来将设置动画效果,这是下拉菜单设计实现的关键。

(1)进入动画的设置。(1)先选中组合的对象,设置自定义动画:自定义动画进入切入,方向“自顶部”,速度“非常快”,开始“之前”;(2)选中显示“导入语”的矩形框:设置自定义动画:自定义动画进入切入,方向“自顶部”;速度“非常快”,开始“之后”;(3)选中显示“演示主题”的矩形框:设置自定义动画:自定义动画进入切入,方向“自顶部”;速度“非常快”,开始“之前”;(4)选中显示“作者简介”的矩形框:设置自定义动画:自定义动画进入切入,方向“自顶部”;速度“非常快”,开始“之前”;(5)选中显示“首页”的矩形框:设置自定义动画:自定义动画进入切入,方向“自顶部”;速度“非常快”,开始“之前”;(6)选中显示“拓展延伸”的矩形框:设置自定义动画:自定义动画进入切入,方向“自顶部”;速度“非常快”,开始“之前”。

(2)触发器的设置。按住Ctrl键,依次选中(1)中已设置的那些对象,单击右键,选择【计时】,在此对话框中选择【计时】选项卡,单击【触发器】,选择【单击下列对象时启动效果】单选按钮,并在后面的下拉列表中选择【矩形5菜单】,单击【确定】,完成设置。

(3)设置退出动画。(1)选中显示“首页”的矩形框:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“单击时”;(2)选中显示“导入语”的矩形框:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“之前”;(3)选中显示“作者简介”的矩形框:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“之前”;(4)选中显示“演示主题”的矩形框:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“之前”;(5)选中显示“拓展延伸”的矩形框:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“之前”;(6)选中组合的对象:设置自定义动画:自定义动画退出切出,方向“到顶部”;速度“非常快”,开始“之后”。

2.2.4设置超链接

设置好第一张幻灯片的所有动画效果后,基本实现了下拉菜单的功能,但在进行演示时,只能顺序单击下拉菜单,不能对下拉菜单进行任意单击访问,为此,笔者对这个问题进行了思考,找到了解决的办法:利用PowerPoint提供的超级链接功能来实现。为了实现下拉菜单中的各项自由跳转,可为其各个子菜单设置超级链接。选择“首页”所在的矩形框,单击右键,选择“超链接”,在“插入超链接”对话框中,将“链接到”选择为“本文档中的位置”,“请选择文档中的位置”的下拉列表框中选择含“首页”内容的幻灯片。用同样的方法为“导入语”、“作者简介”、“演示主题”、“拓展延伸”设置超级链接。

2.2.5复制幻灯片

设置好第一张幻灯片中各个菜单项的超链接后,按下Ctrl+M键5次,添加5张幻灯片,在每一张上添加适当的文字用于显示具体的内容。然后选中第一张做好动画及链接的菜单的所有对象,复制粘贴到所有的幻灯片上。分别将用于演示下拉菜单内容的矩形依次修改为“导入语”、“作者简介”、“演示主题”和“拓展延伸”。

完成以上各个步骤后,就完成了下拉菜单的全部设计。

3结语

利用PowerPoint提供的动画及触发器功能,能够实现下拉菜单的设计。为了实现下拉菜单中的各项自由跳转,实现对下拉菜单的任意访问,可结合超级链接功能,实现其它软件中下拉菜单的功能。通过此实例说明:PowerPoint 2003或以上版本的软件所提供的自定义动画功能,在一定程度上能很好地开发设计者的智力。俗话说得好:“只有想不到,没有做不到”。通过使用动画效果高级设置里面的“触发器”,可以制作下拉式菜单,这或许对创作者提供了很大的灵感,使自己的作品导航功能更加完美。

参考文献

[1]陈魁.PPT演义:100%幻灯片设计密码[M].北京:电子工业出版社,2009.

[2]缪亮.PowerPoint多媒体课件制作实用教程[M].北京:清华大学出版社,2005.

[3]廖明梅,舒清录.如何在PowerPoint中实现汉字笔顺笔画书写的动画效果[J].大理学院学报,2012(10).

动态下拉菜单篇4

网页下拉菜单的制作有很多方法。可以通过制作工具快速实现, 也可以通过控件+编码的方法实现;可以静态实现, 也可以动态实现, 但其本质都是基于HTML语言+JavaScript脚本语言实现。为此, 本文提出一种纯DIV+CSS的静态网页下拉菜单的制作方法。其实现原理是通过HTML语言中的ul, li, dl, dt和dd制作下拉菜单列表, 再利用CSS进行控制, 实现对列表的横向排列。

二、DIV+CSS下拉菜单的实现

首先, 利用HTML语言中的列表标签制作下拉菜单的列表。其次, 对列表做DIV标记以便进行CSS层叠样式表控制。再次, 利用CSS对做了DIV标记的列表进行修饰控制, 实现对列表的横向排列, 实现对主菜单项及子菜单项的超链接的各项属性配置。按照上述步骤, DIV+CSS方式制作下拉菜单的实现步骤如下所示:

(一) 利用HTML代码中的列表标签ul、li、dl、dt和dd实现下拉菜单的列表。部分源代码如下:

(二) 利用DIV区块容器对ul标记进行标记。

控制代码如下:

(三) 通过CSS文件实现对DIV区块的属性设置

1. 可以通过设置menu容器内的li标记的float属性设置菜单式横排还是纵排。如:

#menu li{float:left;//设置菜单显示方式为横向左对齐排列}

2. 通过设置dt标签链接的display属性, 设置当鼠标移到主菜单某一项时, 该项以块的方式进行显示, 即在使用时, 当鼠标移动到一定范围内, 就有鼠标事件发生。

3. 通过设置dd标签, 实现对子菜单的显示设置。常规状态下, dd标签内的内容隐藏, 当鼠标移到到主菜单时, 弹出相应的子菜单。

(1) 常规状态dd属性

(2) 鼠标移动到主菜单时dd属性

三、结束语

基于DIV+CSS的网页下拉菜单设计方法, 经在实践中应用, 达到了设计目标, 在网页浏览中取得了炫目的效果。经该方法设计实现的下拉菜单也可以作为一个模板用于动态网页设计中, 从而实现基于DIV+CSS的动态网页下拉菜单。