用DreamWeaverMX制作导航下拉菜单

  Dreamweaver从出道以来,其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver MX(DW MX)中,对这一功能又有了扩充与改进。

  在DW MX中,行为指的是为了响应某一事件(Event)而采取的一个操作(Action)。其中Event 指的是浏览器的事件,比如窗口刷新、鼠标移动等。而 Action 指的是后台响应事件的 JavaScript 代码,可以完成相应的操作,比如播放声音、翻转图片等。

  用DW MX制作导航下拉菜单是网页中经常使用的特效之一。(如图1)主要应用了DW MX中的“Show-Hide Layers”行为。


  图1

  首先制作好导航条(图1中的“产品中心”那一栏),随后添加一个层,作为下拉菜单将要显示的位置,并填入下拉菜单的对应栏目。

  接下来,打开“Behaviors”面板,同时选中“产品中心”链接(注意,这个时候不能够选中刚刚建好的层,否则无法应用“Show-Hide Layers”行为),单击“+”号,选择“Show-Hide Layers”,就可以看到我们刚刚建好的层在选择项中,可以设定为隐藏或者显示(如图2)。


  图2

  行为的妙用主要体现在:如果我们要实现下拉菜单,关键就是让鼠标移到“产品中心”链接上时,使层显示;而鼠标离开链接时,使层隐藏。根据这种思想,我们首先为这个层设立两个Action,一个选择Hide,一个选择Show。然后,调整Event,将Hide Layer的Event设为OnMouseOut,即为鼠标离开链接;而将Show Layer的Event设为OnMouseOver,即为鼠标选中链接。按“F12”预览,就可看到我们期盼的效果。

  这样,平时我们觉得很神秘的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上继续应用 “Swap Image”行为,实现鼠标点选链接时出现图片翻转效果。

  行为不是一个个孤立的特效,可以由多个行为组合叠加实现复杂的功能,除了DW MX默认设置好的行为外,我们还可以从www.mcromedia.com上下载更多更酷的第三方行为,我们只需将它们直接复制到DreamweaverMXConfigurationBehaviorsActions目录下即可,从而使DW MX的这一闪光点更加眩目。

时间: 2024-11-05 14:59:34

用DreamWeaverMX制作导航下拉菜单的相关文章

用Dreamweaver MX制作导航下拉菜单

dreamweaver|菜单|下拉 Dreamweaver从出道以来,其简便易用而又功能强大的"行为"(Behavior)一直是大家所关注的热点之一.在Dreamweaver MX(DW MX)中,对这一功能又有了扩充与改进. 在DW MX中,行为指的是为了响应某一事件(Event)而采取的一个操作(Action).其中Event 指的是浏览器的事件,比如窗口刷新.鼠标移动等.而 Action 指的是后台响应事件的 JavaScript 代码,可以完成相应的操作,比如播放声音.翻转图片

用DW MX制作导航下拉菜单(组图)

菜单|下拉 Dreamweaver从出道以来,其简便易用而又功能强大的"行为"(Behavior)一直是大家所关注的热点之一.在DreamweaverMX(DWMX)中,对这一功能又有了扩充与改进. 在DWMX中,行为指的是为了响应某一事件(Event)而采取的一个操作(Action).其中Event指的是浏览器的事件,比如窗口刷新.鼠标移动等.而Action 指的是后台响应事件的 JavaScript代码,可以完成相应的操作,比如播放声音.翻转图片等. 用DW MX制作导航下拉菜单是

用DW MX制作导航下拉菜单

Dreamweaver从出道以来,其简便易用而又功能强大的"行为"(Behavior)一直是大家所关注的热点之一.在Dreamweaver MX(DW MX)中,对这一功能又有了扩充与改进. 在DW MX中,行为指的是为了响应某一事件(Event)而采取的一个操作(Action).其中Event 指的是浏览器的事件,比如窗口刷新.鼠标移动等.而 Action 指的是后台响应事件的 JavaScript 代码,可以完成相应的操作,比如播放声音.翻转图片等. 用DW MX制作导航下拉菜单是

jquery实现适用于门户站的导航下拉菜单效果代码_jquery

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i

EXCEL制作二级下拉菜单的方法

EXCEL制作二级下拉菜单的方法         如图所示,在A2单元格输入财务部,B2姓名下拉菜单只显示财务部下方的员工,如果A2输入行政部,在B2单元格下拉菜单只显示行政部下方的员工姓名. 步骤1:首先选中我们需要生成二级菜单的数据区域,按住键盘上的"CTRL+G" 或者 "F5"键 ,在弹出的窗口中单击 "定位条件" 步骤2:定位条件中选择"常量" 常量是用来定位有效的数据,因为我们选择的区域中有很多无效数据,即空白单元

jquery实现二级导航下拉菜单效果_jquery

下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下 运行效果图: 具体代码:第一步:确定导航的html格式 <ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a&

jQuery实现的导航下拉菜单效果示例_jquery

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

html5-如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示

问题描述 如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示 如题如何用HTML和CSS编写一个导航下拉菜单,要鼠标经过显示,只要一个就行 解决方案 hover就好了,ie6-不支持,不过也不需要考虑ie6了.. <!doctype html> <style> ul.menu, ul.menu li{margin:0px;padding:0px;list-style:none;position:relative;} ul.menu li{line-height:25px}

javascript仿京东导航左侧分类导航下拉菜单效果_javascript技巧

本文实例为大家分享了类似于京东.淘宝商城左侧分类导航下拉菜单,供大家参考,具体内容如下 效果图:   实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> &l