Dreamweaver中配置弹出菜单(2)

2008-02-23 06:13:08来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

由于篇幅限制,笔者在这里就不赘述了,先给出一个修改其中一些参数的样例,余下的大家能够自行测试:

this.bgColor = "#000000";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#000000";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


   存盘,回到菜单的HTML文档,F12预览,菜单样式已发生了变化,菜单边框变细致了,是不是很cool啊!



3. 弹出菜单缩回停留时间的修改

  大家会发现弹出菜单要收回似乎要等待一两秒的时间,没关系,在fw_menu.js中找到这句代码:

fwHideMenuTimer = setTimeout("fwDoHide()", 1000);

  将其中的1000改成300,再找到这句代码:

if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}


  将其中的1000改成300,1100改成330,存盘,再回到HTML文档按F12预览一下,是不是快多了。这些数值是以毫秒为单位的,也就是说1000代表1秒,建议这些数值不要设得太小,否则菜单收回太快会导致您点不中弹出菜单。

4. 特别效果的弹出菜单

  运用Javascript来调用和控制CSS滤镜还能够为菜单带来意想不到的效果。在fw_menu.js中使用这样的参数配置:

this.bgColor = "";
this.menuBorder = 3;
this.menuItemBorder = 3;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


  并在下面加上一句:

this.alpha = "Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)";


  然后找到这句:

l.style.backgroundColor = menu.menuItemBgColor;


  在他下面加上一句:

l.style.filter = menu.alpha;


  存盘,回到HTML文档按F12预览,效果如下图所示,是不是很有趣啊!这样的CSS滤镜更有很多,大家能够自己找一些相关资料实践一下。
顺便提一下,大家在查找代码时能够充分利用DW4的查找替换功能,在页面中按Ctrl F快捷键调出查找替换窗,输入要查找的代码,按Find Next就能够了。


  下一篇我们将讲如何用Flash来制作下拉菜单


标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇: Dreamweaver网页编辑常用表现的实现方法

下一篇: Dreamweaver中配置弹出菜单(1)