DW解决下拉下菜单消失的问题.docVIP

DW8解决下拉下级菜单消失的问题 网上已经有很多教程以及视频教大家如何在DW里做一个下拉菜单,但是最大也是最多的问题集中在当鼠标移动离开主层(或称为父层)时,隐藏的子层就消失了,从而无法实现原来设计的去点击子目录(子层)的链接,所以美好的计划落空. 也有很多帖子提出各种其他方法,不是去选择Java程序就是建议你将行为中的Mouseout放在Div或Table中去,这样做的结果都不完整, 或者造成鼠标移走后本来该隐藏的子目录依然坚挺地立在那里,很煞风景. 本人经过摸索发现了其中根本原因,用一个简单的方法即可以解决,所以特地贡献给大家. 一、 导航条的制作 　　首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。  　　按CTRL+F2打开Objects面板，点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，如图。 　　将光标移至层内，点击Objects面板上的表格按钮，插入一个一行四列的表格，设置如图。 　　按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用经典论坛和天极网为例，并加上链接。 二、 下拉选单的制作 (这个是重点!)　　现在开始制作将要下拉出现的菜单，同样用层来制作。 如上图按CTRL健并将鼠标点击放在父层Title中的”经典论坛”单元,再如下图中选择”插入-布局对象-层,或者其它版本直接选择层, 这样就会产生一个子层如下图所示(这里Layer1就是父层Title,Layer2就是Menu1,因为本人在命名前拍照的,抱歉): 现在，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入0、26、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。(至于为什么是这些值,读者自己可以尝试,也可以学习这方面的其他资料,这不是本文的重点) 　　这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为经典论坛的下拉选单出现，填入你所需要的菜单链接。同样的方法，再为天极网也做一个下拉选单（层menu2,记住:一定要是”天极网”的子层哦）。 做好的CSS应该是这样的: 按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。  三、 显示和隐藏效果的添加 　　这一步骤是化腐朽为神奇的关键一步，大家仔细跟我来做。 本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。 　　1．导航条部分 首先按CTRL键不放点击导航条中的第一个单元格，现按Shift+F3打开Behaviors窗口，点按钮，在下拉选项中选中Show-Hide Layers（如图）。如果选项中没有这一项，则选择Show Events For下的IE 5.0后，重新点 按钮，此时Show-Hide Layers将出现。  　　这时将会弹出一个窗口，如下图。在Named Layers框中会列出当前网页所有的层，选中 layer menu1 ，因为我们想要menu1这个层对经典论坛响应。然后点下面的show按钮，OK。 　　这时会回到Behaviors窗口，窗口中出现如下图所示字样，点击Events下的文字onClick，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。 　　下一步是让下拉选单menu1在鼠标移出第一个单元格时再变加隐藏状态。 用鼠标点击”menu1”的边沿,此时DW下面部分应该显示”Menu1”的属性,此时在”行为”菜单里下拉选项中选中Show-Hide Layers，在弹出窗口中选中 layer menu1 ，因为我们想要menu1这个层对经典论坛响应。然后点下面的hide按钮，OK。 　　回到Behaviors窗口，点击向下的小箭头，在下拉选项中选中onMouseOut。