你见过折叠式网站的导航吗?答案是肯定的，目前在主流的网站中，使用折叠式导航的比比皆是，而且有的还特别的美观，那么这种折叠式导航是如何制作的呢?本文就为你解答以下的内容。

　　折叠式菜单实际上是通过层的显示和隐藏，来达到这种效果的。目前比较流行的是jquery的方式来做，这个将在以后的教程里面去讲解，本文讲解的如何在dreamweaver里面如何做到这种效果。

　　第一步：先打开DreamWeaver，先插入一个一行、两列的表格，方法：单击菜单上的“插入”(Insert)，再选取“表格”(Table)，在“行”(Row)中输入1，在列(Columns)中输入2，在单击“确定”。为了美观，在表格的属性栏中，把宽和高分别设为200px和30px，并且把表格的边框颜色全部设为#FFFFFF，然后分别点选两个单元格，在属性栏中将其边框颜色设为#6699FF。在两个单元格内分别输入“资料教程”和“相关软件”。并在单元格属性栏中设为中间对齐(顺便说一句：在DreamWeaver中不但可以设定表格水平对齐方式，而且可以设定垂直位置对齐方式。

　　第二步，在“资料教程”单元格内插入一个层。方法：单击菜单上的“插入”(Insert),再选取“层”(Layer)。这时，在单元格中便会出现一个层。这时我们并不满意层的位置，所以就来移动它。层的移动是非常容易的，选取层，然后按键盘上的箭头键就可以移动了，而且不受任何限制，呵呵，简单吧。同样，我们为了美观也可以在层的属性栏中设定它的大小，把宽和高分别设为100px和90px。

　　第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。再把边框颜色做如第一步的设置。在三个单元格中输入“DreamWeaver”、“FrontPage”和“HotDog”。并在属性栏中设为中间对齐。

　　第四步：最关键的一步来了!在层的属性栏中将“可视”设为“隐藏”(Hidden)，这样在打开网页时便看不见这个层(要是看得见那还叫什么折叠式呀?!)。接着选取单元格，然后单击DreamWeaver最下面那一条状态栏右边的“显示行为”按钮(就是那个最中间的，由两个圆圈组成的那个)，来给单元格添加行为。这里要注意一个：一定要看好了!在行为栏的标题栏上一定要是显示“”才行，这说明你要添加的这个行为是添加在单元格上的，如果没有的话那就要重新点选单元格，直到成功为止。

　　在“行为目标”(Events For)中选择一个合适的浏览器，一般是选择“IE 8”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层”(Show-Hid Layers)， 在弹出的窗口中选择“Layer “Layer1””，就是我们刚才添加的那个层了，再单击“显示”(Show)，确定就行了。这时在行为栏中就出现了我们刚刚添加的这个行为了。接着单击“事件”(Events)下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”(OnMouseOver)。好了，这样当页面载入时，这个层并不会出现，只有当我们的鼠标移上单元格时才会出现，怎样?酷吧?Stop!不要高兴得太早了，不要忘了还有一个问题：鼠标移开单元格之后这个层还是显示着的呀!并不会自动消失的。(不要把电脑当成全自动的，你不告诉它怎么做时，它只是一堆废铁。^_^)其实解决这个问题也很容易，我们可以添加显示层的行为，当然也可以添加隐藏层的行为呀!再单击“+”按钮，选取“显示或隐藏层”，还是选取“Layer1”，不过这次我们点击的是“隐藏”(Hide)了，再确定。然后选择“事件”，单击“当鼠标移开”(OnMouseOut)。OK!完成了。

　　接下来，按照从第二步到第四步的过程，对“相关软件”单元格进行操作。一切完成之后，按下“F12”，预览一下，呵呵，怎么样?简单的几步，就完成了这样炫的效果，一切还是DreamWeaver的功劳啊!(效果如下图)

　　还有一个需要注意，层的移动有时并不能做到“所见即所得”的效果，在编辑时本来位置很满意，但是预览时却一塌糊涂，这就要多预览几次，多修改，才能得到好的效果。再此小编温馨提示，目前主流的菜单导航用的是jquery来制作的，本文介绍的方法，仅供参考，深化dreanweaver方面的知识。