利用dw制作漂亮的导航栏效果

利用dw 制作漂亮的导航栏效果 最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super 大餐。Let’s Go！ 一、进门点心：利用Dreamw eaver MX 制作最基本的下拉菜单 实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加 onclick（点击）或者 onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在 Dreamw eaver 中的具体操作步骤： 1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图 1 所示。 图片如下： 图 1 为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。 2．选中导航条上的链接文本。使用快捷键 Shift+F3 激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图 2 所示。 图片如下： 图 2 显示层 设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3 所示。 图片如下： 图3 隐藏层 设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为 onmou seou t，即鼠标划出时隐藏子层。 3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。 4．设置子层的显示属性为隐藏。 按F12 键在浏览器中预览页面，下拉菜单效果如图4 所示。 图片如下： 默认状态 图片如下： 鼠标划过状态 图 4 下拉菜单效果 至此应该说基本实现了所要求的下拉菜单的效果，但是当把鼠标光标移动到层上，要选择子菜单时，层却消失了。这是因为“显示-隐藏层”的行为是设置在文本“菜单 1”上，鼠标划出文本...