说起弹出菜单大家都不陌生,谈及实现制作方法,也有好多种,几乎Mcromedia的三剑客都可以轻松实现。不过我们在这里既不是要用DW也不是要用FLASH。没有为什么,说多了挨骂-_!!!
Fireworks 从4.0版本开始就有了制作弹出菜单这一功能,到了MX版本,功能有了一些完善,不过不是很大,好了下面我们进入正题.
开始之前必须先确定您拥有以下相关知识(没有不要紧,可以去论坛查找相关的基础知识)
您必须能够使用FWMX创建一个弹出菜单,并可以将其导出并倒入到DW中.
第一章
Fireworks MX虽然能够很方便的帮助我们实现弹出菜单的功能,可是大多时候,他实现的一些效果很难满足我们追求个性的需要.如果我们要实现一些理想中的效果,可能就要对他生成的js代码做些手脚了.做手脚归做手脚,前提你必须明白那些生成的代码都代表了什么,下面我们就来对代码的一些参数做详尽的讲解.
创建弹出菜单并导出之后在mm_menu这个js文件的首行有这样一行
function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn, valgn, pad, space, to, sx, sy, srel, opq, vert, idt, aw, ah)
括号内包含的这些参数名就是你所创建的弹出菜单所使用到的参数.
在你倒入到HTML文件中的JavaScript文件中是类似于这种的只显示参数值
function mmLoadMenus() { if (window.mm_menu_0604164722_0) return; window.mm_menu_0604164722_0_1_1_1_1 = new Menu("Whole Note",57,18, "Arial, Helvetica, sans-serif",12, "#ffffff","#000099","#000099","#ffcc66","left","middle", 3,0,1000,-79,18,true,true,false,0,true,true);
而并不显示参数名,他在这里直接定义了一些相关的参数值,而JavaScript脚本为客户端来读取js的特效.
上面的示例代码中对菜单的编号命名同4.0版本不同,MX的规则是全部以mm_menu开头后部跟随为10位的数字,之间用下划线"_"连接后面用0作为结束,0代表为一级弹出菜单的编号,用来定义一级弹出菜单的属性,从一级菜单中继续再往下细分为二级,按照示例代码第三行mm_menu_0604164722_0_1_1_1_1为例,mm_menu_0604164722_0后面_1就带表二级以此类推,我们可以知道,这个示例代码最终菜单共有四级子菜单. (没有试验过,最多可以有多少级菜单)
以上面代码为例,下面为这些参数名的示意,举一反三相互对照.
label菜单项名字Whole Notemw菜单宽度 57mh菜单高度18fnt 菜单项字体Arial, Helvetica, sans-seriffs 菜单项字体大小12fclr 菜单项字体颜色"#ffffff"fhclr滑过状态文本颜色"#000099"bg单元格背景颜色"#000099"bgh鼠标经过hover状态背景颜色"ffcc66"halgn菜单横向属性"left"valgn菜单纵向属性"middle"pad 菜单单元格边距 3space菜单单元格间距0to弹出菜单延迟时间 (1000毫秒=1秒)1000sx子菜单水平位置-79sy子菜单垂直位置 18srel子菜单位置属性(如果为false,既表示放在同一位置)默认为 truetrueopq菜单边框是否可见 truevert菜单是否为垂直菜单 (true为是)false(否,不是)falseidt 菜单项目缩进(这个数值是以像素作为单位的)0aw自动设置宽度(菜单宽度是自动还是手动设置宽度数值的,像素为单位默认 true 自动设置) trueah 自动设置高度 (菜单高度是自动还是手动设置宽度数值的,像素为单位默认 true 自动设置) true
上一章中我们主要给大家介绍了弹出菜单生成的代码部分。那只是用到了一部分的功能,也只能实现基础的表格形式的菜单。可是对于追求的个性的我们,那似乎满足不了我们的需求,这时候我们就可以用到另一个功能如图。
生成图形格式的弹出菜单。但是大家可能发现了生成的这个图形菜单只能应用基本的FWMX样式,怎么办?不要问我,一切设置完毕最后导出菜单之后,你有没有发现都生成了哪些图片呢?
是不是有类似于mmmenu1_21x26_over.gif和mmmenu1_21x26_up.gif这样命名的图片呢?
找到之后打开他们看看是不是就是你在FWMX里面设置的菜单样式的图片呢,然后你就可以用你自己制作的图形来替换掉他们,注意文件名最后一个下划线后面的over和up,up是没有选中时候的菜单样式,over是鼠标经过时候的样式。
恩对于图形化的弹出菜单呢,有几个地方我需要说明一下,其实不是只有这样一种办法可以做出个性化可以定制的图形弹出菜单,只是我上面所提到的办法比较不容易出错,只要作之前心里有个大概的样式,明确好菜单文字在图形中所处的位置,事先在FWMX或生成的原码里改变弹出菜单的高,宽,文字边距大小缩进,这样做出来之后能适应更个性化的图形。
第三章 手动去掉FWMX生成菜单后的“尾巴”
FWMX在生成子级弹出菜单的同时,会在该父级菜单后出现一个小箭头,平时到还无所谓了,可是有时面对做的那么个性的菜单,他无疑就成了一块疤,好丑哦~~
怎么办呢?很简单找到名叫arrows.gif这个文件,不需要删除就可以了。如果想要改变样式,就找一个类似于这种能够给人以指示功能的小图标就可以了,命名叫arrows.gif一覆盖就可以了。
从现在开始吧,定制一个你心目中最完美的弹出菜单效果,恩具体办法具体解决,大家可以不断的摸索,初级的如何用Fireworks MX制作和导出并导入我没有在文章中指出,因为我看了一下Fireworks MX帮助教程,里面写的很清楚。