下拉菜单全攻略之Fireworks篇

http://tech.ddvip.com   2007年04月16日    社区交流

本文详细介绍下拉菜单全攻略之Fireworks篇

   存盘,回到菜单的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来制作下拉菜单。

作者:Poorfish    责编:豆豆技术应用

正在加载评论...