<b>下拉菜单全攻略之Dreamweaver篇</b>[DW设计]
本文“<b>下拉菜单全攻略之Dreamweaver篇</b>[DW设计]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：
下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就呈现一个越发具体的菜单,它不但节俭了排版上的空间、使筹划简便有序,并且一个新颖美好的下拉菜单,更是为您的增色不少.
制作下拉菜单的办法多种多样,本期专栏将为您介绍四种常用的制作办法,让您随心打造自己的下拉菜单.
■ 用制作下拉菜单
是制作下拉菜单最常用的工具,办法简单,掌握安闲,可以最大限度地随心打造菜单款式,是制作下拄菜单的必修课.
用制作下拉菜单的原理很简单,它操纵了Behaviors（行为）面板中的内置办法Show-Hide Layers（躲藏-显示层）办法,并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的躲藏和显示,而将要呈现的菜单就在层中.
因此,我们可以分四步来制作下拉菜单,首先我们需求一个导航条,它用来安排首先呈目前浏览者眼前的主菜单;然后再制作开始躲藏着而将会呈现的下拉选单;接着,举行最关键的一步,为主菜单和下拉选单增添上躲藏和显示层的效果;最后,我们举行菜单的美化修饰.终究看到的效果如图,您也可以拜候以下地址:menu.htm
相信你已经等不急了,那就让我们即刻开始吧!
1、 导航条的制作
首先举行一些必要的前期工作,按CTRL+J,翻开Page Properties（页面属性）窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置.
按CTRL+F2翻开Objects面板,点击层按钮
后在页面中按住鼠标不放拖出一个层,然后在层的Properties（属性）面板中设置各参数,Layer ID框填入title,L、T、W、H框辨别填入8、15、480、15,后台色填入#006699,如图.
将光标移至层内,点击Objects面板上的表格按钮
,插入一个一行四列的表格,设置如图.
按住CTRL键不放点取表格的四个单元格,然后设置它们的宽度为120,并在前两个单元格中输入文字,就是你的主菜单名,可按自己想要的名字输入,我用"经典论坛"和"天极网"为例,并加上链接.
2、 下拉选单的制作
目前开始制作将要下拉呈现的菜单,一样用层来制作.
再次从Objects面板插入一个层到前面我们做好的导航条的下方,各项参数填为:Layer ID框填入menu1,L、T、W、H框辨别填入8、34、120、80,后台色填入#999966,此中L和T两个参数是设置这个层距离窗口左边框和上边框的距离,一定不能填错,不然菜单将会错位,也将影响完成后的可用性.
这时刻,我们便可以在menu1这个层中输入我们所要的菜单内容.为了排版便利,我在这还是利用表格来做菜单.这个层将作为"经典论坛"的下拉选单呈现,填入你所需求的菜单链接.一样的办法,再为"天极网"也做一个下拉选单（层menu2）.
这一步要注意的地方就是下拉选单所在的层（menu1、menu2）的位置非常重要（由L和T两个参数决意）.它们的上边线应当紧贴导航条的下边线,这样才能保证在背面我们完成第三个步骤后,菜单能正常利用.因为假如远离导航条的话,鼠标一离疏导航条,菜单就消逝了.
按F2翻开LAYER（层）面板,此中列出了中的三个层,点menu1和menu2的前面一格,呈现闭着的眼睛图标,这两个层便躲藏起来了.操作这一步是因为下拉菜单的初始状况是不可见的.
3、 显示和躲藏效果的增添
这一步骤是化腐败为奇异的关键一步,大家细心跟我来做.
本步骤分为两部份:第一,对导航条中的主菜单增添掌握显示躲藏的号令;第二,给下拉选单本身增添显示躲藏的号令.
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）.
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加躲藏状况.
再点按钮,在下拉选项中选中"Show-Hide Layers",在弹出窗口中选中" layer "menu1" ",因为我们想要menu1这个层对"经典论坛"呼应.然后点下面的"hide"按钮,OK.
回到Behaviors窗口,点击向下的小箭头,在下拉选项中选中onMouseOut.
2．下拉选单部份
先选中层menu1,办法是点击层的边沿或在LAYER面板中点击menu1,用与导航条部份一样的办法在Behaviors窗口中为它增添显示与躲藏自己的号令.这样做的效果是当鼠标移出层menu1时,层menu1就自动躲藏.最后层menu1的状况如图所示.
3．反复以上两部份,为导航条的第二个主菜单"天极网"和层menu2增添显示、躲藏层号令.
4、 下拉菜单的美化修饰
到这里,下拉菜单的功效效果已经实现了,你目前按F12便可以看到.不过你一定也发现菜单有点丢脸,字不够精密,菜单选项的默许链接色不好看,菜单也没有边框,那就让我们来稍稍为它美容一下.
1．定义菜单款式
按Shift+F11翻开CSS Style（款式）面板,点击面板下面的
按钮
在弹出的"New Style"窗的Tag框内选中td标签,Type选第二项Redefine HTML Tag,Define选This Document Only,如图.
此时弹出设置窗口,不管别的的,只在右边的Size框里选中12,单位为pixels.
2．定义菜单链接款式
在款式面板中,点击面板下面的 按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:hover标签,Define选This Document Only,如图.
点击OK后在弹出窗中,Color填#ff9933,Decoration选none,点OK.
返回到款式面板,点击面板下面的按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:link标签,Define选This Document Only.
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK.
又返回到款式面板,点击面板下面的按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:visited
以上是“<b>下拉菜单全攻略之Dreamweaver篇</b>[DW设计]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：
| 本文地址： | 与您的QQ/BBS好友分享! |
- 好的评价 如果您觉得此文章好，就请您
0%(0) 
- 差的评价 如果您觉得此文章差，就请您
0%(0) 
中查找“<b>下拉菜单全攻略之Dreamweaver篇</b>”更多相关内容
中查找“<b>下拉菜单全攻略之Dreamweaver篇</b>”更多相关内容