制作下拉菜单

利用层制作下拉菜单导航 利用层制作下拉菜单导航 1、导航条的制作： （1）首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图所示，这一设置对菜单的位置将有影响，所以请如图设置。 “页面属性”对话框中的外观设置 （2）按CTRL+F2打开Objects面板，在布局栏中点击层按钮 后在页面中按住鼠标不放拖出一个层，然后在层的属性面板中设置各参数，“层编号”框填入title，左、上、宽、高框分别填入8、15、500、15，背景色填入#3366CC，如图2-36所示。 图2-36　设置后层title的“属性检查器” （3）将光标移至层内，点击Objects面板上布局栏中的格按钮 ，插入一个一行四列的表格，设置如图2-37所示。 图2-37　设置后的“表格”对话框 （4）在前两个单元格中输入文字“经典论坛”和“天极网”，并调整这两个单元格的宽度，最终效果如图2-38所示。 图2-38　导航条设计效果 2、制作下拉选单 （1）现在开始制作下拉出现的菜单，同样用层来制作。再次从Objects面板的布局栏中插入一个层到前面我们做好的导航条的下方，各项参数填为：“层编号”框填入menu1，左、上、宽、高框分别填入8、34、120、80，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。层属性设置如图2-39所示。 图2-39　设置后层memu1的“属性检查器” 这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表格来做菜单。这个层将作为“经典论坛”的下拉选单出现，填入你所需要的菜单链接。最终效果如图2-40所示。 图2-40　层memu1的设计效果 （2）同样的方法，再为“天极网”也做一个下拉选单（层menu2）。其层的属性设置和最终效果如图2-41和图2-42所示。 图2-41　设置后层memu2的“属性检查器” 图2-42　层memu2的设计效果 （3）按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。如图2-43所示。 图2-43　“层”面板 下面为下拉菜单添加显示和隐藏效果 本步骤分为两部分：第一，对导航条中的主菜单添加控制显示隐藏的命令；第二，给下拉选单本身添加显示隐藏的命令。 （4）选择第一个单元格中的文字部分，再按Shift+F4或选择“窗口”->“行为”命令打开行为面析，点 按钮，在下拉选项中选中“显示-隐藏层”（如图2-44所示）。如果选项中没有这一项或这一项不可用，则选择“显示事件”下的IE 5.0（如图2-45所示）后，重新点击按钮，此时“显示-隐藏层”将出现或变为可用。 　图2-44　“显示-隐藏层”菜单　　　　　　　　图2-45　“显示事件”菜单 （5）这时将会弹出“显示-隐藏层”对话框。在“命名的层”框中会列出当前网页所有的层，选中“层 "menu1" ”，因为我们想要menu1这个层对“经典论坛”响应。然后点下面的“显示”按钮，选中“层 "menu2" ”，然后点击下面的“隐藏”按钮，然后单击“确定”即可。如图2-46所示。 图2-46　“显示-隐藏层”对话框 　　（6）这时会回到行为面板中，面板中出现如图2-47所示字样，点击文字“onClick”，会出现一个向下的小箭头，点击它，在下拉选项中选中onMouseOver如图2-48所示。这一步的作用是实现当鼠标移至第一个单元格时，下拉选单menu1的状态变为显示（Show）。 　　 　　　　 图2-47　“行为”面板　　　图2-48　下拉选项中的行为动作 （7）用同样的方法设置下拉选单menu2在鼠标移至第二个单元格的文字上时变为显示状态。只是选中“层 "menu2" ”，然后点下面的“显示”按钮，选中“层 "menu1" ”，然后点击下面的“隐藏”按钮，如图2-49所示。回到行为面板中，点击onClick向下的小箭头，在下拉选项中选中onMouseOut。 图2-49　“显示-隐藏层”对话框 （8）选中层menu1，用与导航条部分同样的方法在行为面板中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时，层menu1就自动隐藏。最后层menu1的onMouseOut行为的设置如图2-50所示，onMouseOver行为的设置如图2-51所示。 图2-50　层memu1的onMouseOut行为设置 图2-51　层memu1的onMouseOver行为设置 　　（9）用同样的方法为层memu2添加显示与隐藏自己的命令。到此为止，这个下拉菜单已经制作完成，保存后我们按F12键测试。