網生@誌 | zEUS.'Blog

首页 » 网页美化 » 2007-12-19 »

使用 DW 制作悬浮菜单

字体大小:T | T

之前使用 CSS 制作过悬浮菜单,但它只能显示在 Firefox 和 Safari 上,而不能显示在不完全支持 CSS2.0 的 IE6 上,为此我花了很长时间搜寻解决之道,期间被那该死的 IE 折磨得我抓狂无数次,可仍然无果… 最后我不得不放弃使用 CSS 而转投 JavaScript…

这里我将介绍的是使用 DreamWeaver 直接进行可视化操作来创建一个悬浮菜单,整个主线过程无须操作代码,实现起来非常简单,当然,最重要的是它适用于所有主流的浏览器!

具体效果可以参见本站日志栏下的“文章分类”和“日志归档”这2个栏目。

悬浮菜单

运行 DW 后新建一个 HTML 文档,我们先单击“布局”栏的“绘制 AP Div”按钮(上图红圈处)来绘制2个 DIV 容器,默认命名为:apDiv1apDiv2,然后给它们添加一些内容和样式,并稍微修改代码让 apDiv1 包含 apDiv2

接下来我们想要的效果是:默认不显示 apDiv2 菜单,当鼠标移动到 apDiv1 层上,则显示 apDiv2 菜单,移开则让 apDiv2 菜单隐藏。

开始添加 JavaScript 效果:点击工具栏的“窗口

悬浮菜单

并在下拉菜单中选择“行为”,即可在右侧栏看到“行为”的设置窗口

悬浮菜单

在可视化的界面下选择 apDiv1 层,然后给其添加行为:“显示-隐藏元素

悬浮菜单 

悬浮菜单 (图-1)

修改这个行为的条件为“onMouseOver

悬浮菜单 (图-2)

你可能已经看懂了,以上步骤就是实现鼠标移动到 apDiv1 层上(onMouseOver),然后就显示 apDiv2 菜单,接下来创建一个相反的行为:鼠标从apDiv1 层上移开则隐藏 apDiv2 菜单,过程与上面大致相同,不同的是当创建到(图-1)步骤时选择隐藏 div “apDiv2” ,进行到(图-2)步骤时条件选择为:onMouseOut

最后我们还需要将 apDiv2 菜单的初始状态设为隐藏才能真正达到效果。将下面这段代码加入到 apDiv2 的样式中即可:
visibility: hidden;

保存预览即可看到效果,不过 Firefox 和 IE6 下的效果会有些不一样,可以根据需要针对性的在 CSS 里进行不同的定义。

zEUS.

« »

已经有13人发表了评论

  1. 哈哈,你博客的那只大铁手终于没了,可能因为我是女生,说实话,真不太习惯那只大手。

  2. @小胖:如果能早点读到你这篇日志我就不会抓狂那么长时间了… 😥
    @gangege:握手!
    @sofish:呵呵,其实是右侧 😆
    @keke:我还会继续介绍用 DW 做特效的~ 有空多来看看吧~ 🙂

发表您的看法

TOP COMMENTS BOTTOM