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

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

最近论坛中很多网友问到各种菜单和导航的制作方法，下面我们就网上常见的一些菜

单和导航效果做简单的介绍。考虑到满汉全席的菜单应该是最全的了，我们就以此为名，来顿super大餐。Let’s Go！

一、进门点心：利用Dreamweaver MX制作最基本的下拉菜单

实现下拉菜单的思路是首先建立一个相对定位的层，调整其位置，并设置其显示属性为隐藏，然后通过给链接文本或图象添加onclick（点击）或者onmouseover（鼠标划过）的事件来触发“显示-隐藏层”的行为，显示隐藏的层，并且在鼠标划出层时隐藏层，实现下拉菜单的完整效果。下面介绍在Dreamweaver中的具体操作步骤：

1．使用菜单在页面中插入一个层，这个层是相对定位的层，然后再在其中插入一个子层，因为子层的位置是相对于父层而言，所以只要父层的位置不发生变化，改变子层的位置和大小不会改变其相对性，效果如图1所示。 图片如下：

图1

为了父层不占据页面空间，可以设置其宽和高为0，因为以后要调整子层的位置，所以先不设定子层的显示属性为隐藏，而是到确定子层到合适位置后再设置。

2．选中导航条上的链接文本。使用快捷键Shift+F3激活行为面板，单击行为面板中的加号按钮，在弹出的行为下拉菜单中选择“显示-隐藏层”，在弹出的设置对话框中选中子层，单击显示按钮，如图2所示。 图片如下：

图2 显示层

1

少年易学老难成，一寸光阴不可轻 -

设置完毕后单击确定按钮，修改其触发事件为onmouseover，即当鼠标划过文本时显示层。接下来还需要设置鼠标划出文本后的行为，继续使用行为面板，选择“显示-隐藏层”，在弹出的对话框中选中子层，单击隐藏按钮，如图3所示。 图片如下：

图3 隐藏层

设置完毕后单击确定按钮，在行为面板中修改该行为的触发事件为onmouseout，即鼠标划出时隐藏子层。

3．拖动子层，调整其位置到和导航条贴近并垂直位于导航文本的下方的位置。层在编辑页面中的位置和在浏览器页面中的位置是有差异的，所以需要多次调整并在浏览器中预览效果，只到达到合适的位置。 4．设置子层的显示属性为隐藏。

按F12键在浏览器中预览页面，下拉菜单效果如图4所示。 图片如下：

默认状态 图片如下：

2

少年易学老难成，一寸光阴不可轻 -

鼠标划过状态 图4下拉菜单效果

至此应该说基本实现了所要求的下拉菜单的效果，但是当把鼠标光标移动到层上，要选择子菜单时，层却消失了。这是因为“显示-隐藏层”的行为是设置在文本“菜单1”上，鼠标划出文本区域后，当然就响应了隐藏层的行为。所以还需要进一步的设置，给子层也加上“显示-隐藏层”行为。利用行为面板，给子层加上“显示-隐藏层”行为，更简单的方法是在链接文本的HTML代码中拷贝如下代码：

onMouseOver=\"MM_showHideLayers('layer2','','show')\" onMouseOut=\"MM_showHideLayers(' layer2','','hide')\"

在子层的DIV标签内粘贴以上代码即可。按F12在浏览器中预览，当鼠标划过映射时弹出下拉菜单，通过鼠标可以在下拉菜单中选择，鼠标划出映射和下拉菜单区域时，下拉菜单消失，完全实现了预定的效果。 小节：

1．导航条的下边框线与子层的上边框应该重合，否则当鼠标光标移动到文本和层之间的空白区域时，层就会隐藏，达不到应有的效果；

2．对于有多个下拉菜单时，可以将多个子层放在一个父层中。为保持位置的统一，在调整完第一个子层的位置后，记下层距上和距左的值。当导航图像为水平方向时，所有子层的距上的值都是相同的；当导航图像为垂直方向时，所有子层的距左的值都是相同的； 3．调整完全部子层的位置后，再设置层的显示属性，有助于保持所有子层格式的统一； 4．在层中插入图像或动画等页面元素可以制作出更酷的菜单效果。 {$page}

二、三道茶：使用Dreamweaver MX中的行为

使用“显示弹出式菜单”行为，可以快捷在页面中创建出自定义样式的弹出菜单。 具体的做法如下：

创建一个空白HTML文档，保存文件。选中页面中的链接（文本或图象）打开行为面板，单击加号按钮，选择动作菜单中的“显示弹出式菜单”，弹出设置弹出式菜单对话框，内容窗口图5所示。

图片如下：

3

少年易学老难成，一寸光阴不可轻 -

图5 设置菜单项目对话框 文本、链接、目标的意义都很容易理解。 菜单：单击加号按钮可以添加菜单项目，选中菜单项目后单击减号按钮可以删除相应的菜单项目；选中菜单项目，单击 按钮可以转换到上级菜单，单击 按钮可以转换到下级菜单；单击上、下箭头按钮可以调整菜单项目的相对位置关系。

设置完菜单项目后单击“外观”选项卡可设置菜单的外观，如图6所示。

图6设置菜单外观对话框

在第一个下拉列表中选择弹出菜单的样式为垂直菜单或者水平菜单，下面几个按钮可以设置文本的状态。

一般状态：在颜色选择器中选择菜单项目文本和单元格在默认状态下的颜色；

滑过状态：在颜色选择器中选择当鼠标光标滑过单元格时菜单项目文本和单元格的颜色；

设置完菜单外观后，单击“高级”选项卡设置菜单的高级属性，如图7所示。

图片如下：

4

少年易学老难成，一寸光阴不可轻 -

图7 设置菜单高级属性对话框 前几个选项和一般表格参数的意义一致

文本缩进：菜单项目文本在单元格中的缩进距离（单位：像素）； 菜单延迟：打开弹出菜单的延迟时间（单位：毫秒）；

弹出式菜单边框：选中“显示边框”就可以对边框颜色进行设置；不选中，就不会显示边框；

设置完菜单高级属性后，单击“位置”选项卡设置菜单的位置，如图8所示。 图片如下：

图8设置菜单位置对话框

在菜单位置中选择不同的按钮可以设置菜单与设定网页元素之间的位置关系。单击按钮设置弹出菜单位于网页元素的右下角；单击按钮设置弹出菜单位于网页元素的下方并靠近左边缘；单击按钮设置弹出菜单位于网页元素的上方并靠近左边缘；单击按钮设置弹出菜单位于网页元素的右上角；

在X和Y文本框中可以设定菜单的相对与网页元素左上角的距离（单位：像素）； 选中“在发生onmouseout事件时隐藏菜单”复选框，当鼠标光标划出菜单时菜单隐藏，实际上就是应用了隐藏弹出式菜单的动作。 5

少年易学老难成，一寸光阴不可轻 -

设置完弹出菜单所有的属性后，单击确定按钮即可在页面中插入弹出式菜单，按F12键在浏览器中预览效果，如图9所示。

图片如下：

图9弹出式菜单效果

使用显示弹出式菜单时，如果使用的网页元素为图像，需要首先给图像文件命名。体现在HTML代码中就是在img标签中加上id属性，这样才可以给图像应用上显示弹出式菜单的动作。

6