使用 DW 制作悬浮菜单
Tag: css , firefox , JavaScript之前使用 CSS 制作过悬浮菜单，但它只能显示在 Firefox 和 Safari 上，而不能显示在不完全支持 CSS2.0 的 IE6 上，为此我花了很长时间搜寻解决之道，期间被那该死的 IE 折磨得我抓狂无数次，可仍然无果… 最后我不得不放弃使用 CSS 而转投 JavaScript…
这里我将介绍的是使用 DreamWeaver 直接进行可视化操作来创建一个悬浮菜单，整个主线过程无须操作代码，实现起来非常简单，当然，最重要的是它适用于所有主流的浏览器！
具体效果可以参见本站日志栏下的“文章分类”和“日志归档”这2个栏目。
运行 DW 后新建一个 HTML 文档，我们先单击“布局”栏的“绘制 AP Div”按钮（上图红圈处）来绘制2个 DIV 容器，默认命名为：apDiv1 和 apDiv2，然后给它们添加一些内容和样式，并稍微修改代码让 apDiv1 包含 apDiv2。
接下来我们想要的效果是：默认不显示 apDiv2 菜单，当鼠标移动到 apDiv1 层上，则显示 apDiv2 菜单，移开则让 apDiv2 菜单隐藏。
开始添加 JavaScript 效果：点击工具栏的“窗口”
并在下拉菜单中选择“行为”，即可在右侧栏看到“行为”的设置窗口
在可视化的界面下选择 apDiv1 层，然后给其添加行为：“显示-隐藏元素”
（图-1）
修改这个行为的条件为“onMouseOver”
（图-2）
你可能已经看懂了，以上步骤就是实现鼠标移动到 apDiv1 层上（onMouseOver），然后就显示 apDiv2 菜单，接下来创建一个相反的行为：鼠标从apDiv1 层上移开则隐藏 apDiv2 菜单，过程与上面大致相同，不同的是当创建到（图-1）步骤时选择隐藏 div “apDiv2″ ，进行到（图-2）步骤时条件选择为：onMouseOut。
最后我们还需要将 apDiv2 菜单的初始状态设为隐藏才能真正达到效果。将下面这段代码加入到 apDiv2 的样式中即可：
保存预览即可看到效果，不过 Firefox 和 IE6 下的效果会有些不一样，可以根据需要针对性的在 CSS 里进行不同的定义。
zEUS.
@fiorano：呵呵，我比较幸运，有个同事玩 DW 超级厉害，我跟他学了不少招数～ 另外 eclipse 和 netbean 是啥？
@凯尔：做悬浮菜单主要是因为 WP 默认的下拉菜单样式无法修改，和主题不搭调，所以干脆自己做一个。我对 JS 代码不熟悉，所以只好借助工具了
好难。。。dreamweaver尝试了好多次，结果同时尝试的eclipse会了，netbean会了，firework也会了，就是这个还不会。。。
不错，顶一下
不过现在博客层次都比较平，很少能用到悬浮菜单，另外自己更喜欢直接写。
我前段时间倒是研究过纯css的悬浮下拉菜单
http://www.helloxudan.net/2007/11/09/inquiry-pure-css-drop-down-menu.html
很好，我就喜欢用DW做东东!
感觉不错,最喜欢的还是你这个主题弄得那个single post左侧的content menu
…
前几天我们刚刚完成一个制作网站任务，早看到这个就可以实践一下累
哈哈，Bony 真是神速啊～
沙发， 我不是一个人在战斗。哈哈
那个theme不错哈。。。不修改。。。稍后修改。。。