Free CSS Navigation Menu Designs 1 at exploding-boy.com
发新话题
打印

[讨论] 用dreamweaver mx制作导航下拉菜单

用dreamweaver mx制作导航下拉菜单

dreamweaver从出道以来,其简便易用而又功能强大的“行为”(behavior)一直是大家所关注的热点之一。在dreamweaver mx(dw mx)中,对这一功能又有了扩充与改进。
+ U% O( K( E) p    在dw mx中,行为指的是为了响应某一事件(event)而采取的一个操作(action)。其中event 指的是浏览器的事件,比如窗口刷新、鼠标移动等。而 action 指的是后台响应事件的 javascript 代码,可以完成相应的操作,比如播放声音、翻转图片等。
, f" o4 r" Y, g    用dw mx制作导航下拉菜单是网页中经常使用的特效之一。(如图1)主要应用了dw mx中的“show-hide layers”行为。 * {' ?+ N! M. S) e$ Y
( U/ _3 ^! i  m$ |) f% D( C
图16 V& C, v" L. p2 w. P
    首先制作好导航条(图1中的“产品中心”那一栏),随后添加一个层,作为下拉菜单将要显示的位置,并填入下拉菜单的对应栏目。
( R, _' n* ~) z% C    接下来,打开“behaviors”面板,同时选中“产品中心”链接(注意,这个时候不能够选中刚刚建好的层,否则无法应用“show-hide layers”行为),单击“+”号,选择“show-hide layers”,就可以看到我们刚刚建好的层在选择项中,可以设定为隐藏或者显示(如图2)。
$ U3 q* k! u: u! N$ n# ~6 G7 @2 g0 {3 {
; k6 k( |/ c% P; ^9 ~
图2
: e2 Y5 r6 M( f3 b5 X% F7 |    行为的妙用主要体现在:如果我们要实现下拉菜单,关键就是让鼠标移到“产品中心”链接上时,使层显示;而鼠标离开链接时,使层隐藏。根据这种思想,我们首先为这个层设立两个action,一个选择hide,一个选择show。然后,调整event,将hide layer的event设为onmouseout,即为鼠标离开链接;而将show layer的event设为onmouseover,即为鼠标选中链接。按“f12”预览,就可看到我们期盼的效果。
8 v) q( i1 a0 ^5 k+ [  ?  t) \    这样,平时我们觉得很神秘的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上继续应用 “swap image”行为,实现鼠标点选链接时出现图片翻转效果。
' r- }4 Z7 j* ~; A! k/ X    行为不是一个个孤立的特效,可以由多个行为组合叠加实现复杂的功能,除了dw mx默认设置好的行为外,我们还可以从www.mcromedia.com上下载更多更酷的第三方行为,我们只需将它们直接复制到dreamweavermx\configuration\behaviors\actions\目录下即可,从而使dw mx的这一闪光点更加眩目。

TOP

发新话题