荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: MarchRain (世纪末的情话), 信区: Homepage
标 题: 网页菜单巧制作
发信站: BBS 荔园晨风站 (Thu Aug 24 19:45:51 2000), 转信
下拉菜单技术常常在大型网站（如微软公司网站）中被用于网站导航，这样可有效
的缩短浏览者定位至特定内容的时间。用Javascript或VBscript虽可实现该项效果
，但需要学习脚本语言和DHTML。有没有一种较为简便的方法呢？其实，用
Dreamweaver和CSS就可以很方便的制作出（多级）下拉菜单。这里将用一个两级菜
单的例子来说明。
对菜单的显示过程进行一下分析，可以发现以下几点：
1 当鼠标移动到文字（或图像）上，菜单显示；
2 鼠标从文字（或图像）上移开（除菜单外的位置），菜单消失；
3 鼠标从文字（或图像）移动到菜单上，菜单保持显示(这是关键)；鼠标从菜单移
开，菜单消失。
4 对于多级菜单还要保持上下级菜单的同步。
5当鼠标移动到菜单项目上，菜单项的外观（前景，背景或边框）变化。
用DreamWeaver(下面简称DW)的层（Layer）与行为（Behavior）联用可实现
1-4点。基本原理就是在MouseOver和MouseOut事件中设定相应的层Show或者Hide。
，具体步骤如下所述。
A 在网页中插入一个层，命名为menubar。在menubar层中插入一个单行三列的
表格作为导航条。设定表格的宽度，然后在menubar层中再插入一个层，命名为
menu并设置vis属性为“hidden”，这就是第一级菜单。在Layer menu中插入3行一
列的表格作为菜单项目。
B 对其中一个单元格设置OnMouseOver :Show(layer menu)和OnMouseOut :
Hide(layer menu)动作。
测试该网页，我们会发现随着鼠标移进、移出单元格，Layer menu显示、消失
，但将鼠标从单元格移向菜单时，菜单却消失了，即前面提到的第3点无法实现。
用下面这个方法解决此问题。
C 移动Layer menu，让它覆盖住单元格的下边（注意不要遮住其中的文字），
对Layer menu本身设置OnMouseOver :Show(layer menu)、OnMouseOut :
Hide(layer menu)动作。
现在试一试，菜单的显示、消失正常。这是因为菜单层的的上边界与单元格的
下边界交错，鼠标离开单元格后IE还来不及执行Hide(layer menu)就检测到了鼠标
移动到菜单层的动作，这样IE将先执行Hide然后再执行Show动作，因为速度很快，
所以看不到菜单消失再显示的过程。其实即使菜单层不与单元格交错，只要两者距
离足够小（1-3个像素），也能达到同样的目的，道理一样。
D 在 menu 层中插入submenu层，作为子菜单。重复B-C步骤，为子菜单设置动
作，这里要注意对子菜单不仅要设置OnMouseOut:Hide(Submenu),还要设置
OnMouseOut:Hide(menu),即鼠标离开时子菜单和主菜单要同时消失。
请看编辑状态下的菜单：
注意菜单层的镶套，这样调整主菜单位置后子菜单位置才能自动调整。
想使菜单的外观更丰富多彩，可使用CSS。以下一段样式表，可使菜单项呈现
按钮效果。
.menu { font-size : 14px;background: #CCCCCC; color : #000000;
text-decoration : none; border : 3px solid #CCCCCC; width: 100%; }
.menu:hover { font-size : 14px; background: #000080; color : #FFFFFF;
text-decoration : none; border :3px outset;}
.menu:active { font-size : 14px;background: #000080; color : #FFFFFF;
text-decoration : none; border : 3px inset;}
由于DW中样式表编辑器支持的属性有限，需要手动编辑该段样式表，或者利用
一些外置的编辑器（推荐使用Topstyle）。插入或联接该样式表后，对菜单项中的
文字设定使用menu样式即可。
完成后的菜单效果,请大家在页面上找一下。
--
Ｗｉｌｌ ｙｏｕ ｓｔｉｌｌ ｌｏｖｅ ｍｅ ｔｏｍｏｒｒｏｗ？
※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 192.168.28.99]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店