- Java Web程序开发范例宝典
- 王国辉 郭铁 李根福编著
- 97字
- 2020-06-27 11:01:02
2.5 下拉菜单式导航条
下拉菜单式导航条可以使整个页面看起来更规范，下拉菜单式导航条可以分为二级导航菜单、半透明背景的下拉菜单、弹出式下拉菜单等。下面通过具体实例介绍在JSP中实现下拉菜单式导航条的方法。
实例048 二级导航菜单
本实例是一个实用的程序
实例位置：光盘\mingrisoft\02\048
实例说明
网站中的导航条在整个网站中充当着网站路标的作用，如果一个网站的导航条层次混乱，或是分类不清晰，就会给网站的浏览者带来诸多不便，因此设计一个层次分明的网站导航对于一个网站极为重要。例如，企业进销存管理系统中的菜单大致可以分为“基础信息”、“采购管理”、“库存管理”等，但是在基础信息中还要分为“客户信息管理”、“商品信息管理”、“供应商信息管理”等，这就需要建立二级导航菜单。运行本实例，将鼠标指针移动到一级菜单“基础信息”超级链接上时，在其下方将显示与其对应的二级导航菜单，如图2.23所示。
图2.23 二级导航菜单
技术要点
实现二级导航菜单主要应用JavaScript的switch语句确定要显示的二级菜单的内容，switch语句的语法格式如下：
switch (expression){
case label :
statement;
break;
case label :
statement;
break;
..
default: statement;
}
说明：
① JavaScript执行switch语句时，首先计算switch后括号内表达式的值。当此表达式的值与某个case后面的常数表达式的值相等时，就执行此case后的语句。如果所有case后的常数表达式的值都不等于此表达式的值，就执行default后面的语句。
② 当执行某个case后的语句如果遇到break语句，就结束这条switch语句的执行，转去执行这条switch之后的语句。break语句也可以省略，但这时程序会一直执行到这条switch语句的结束标记，即右大括号“}”。
注意：通常情况下，都应该在switch语句的每个分支后面加上break语句，使JavaScript只执行匹配的分支。
实现过程
（1）在网页中适当的位置添加一级导航菜单，本实例中的一级导航菜单是由一系列空的超链接组成的，这些空的超链接执行的操作是调用自定义的JavaSctript函数Fsubmenu()显示对应的二级菜单，在调用时需要传递一个标记主菜单项的参数，关键代码如下：
<td width="90%" class="shadow">
<a href="#" onClick="Fsubmenu('基础')" >基础信息</a>
|<a href="#" onClick="Fsubmenu('采购')">采购管理</a>
|<a href="#" onClick="Fsubmenu('库存')">库存管理</a>
|<a href="#" onClick="Fsubmenu('销售')">商品销售</a>
|<a href="#" onClick="Fsubmenu('查询')">查询统计</a>
|<a href="#" onClick="Fsubmenu('往来')">往来管理</a>
|<a href="#" onClick="Fsubmenu('系统')">系统设置</a>
</td>
（2）在网页中显示二级菜单的位置添加一个名为submenu的<div>标记，代码如下：
<div id="submenu" class="word_yellow"> </div>
（3）编写自定义JavaScript函数Fsubmenu()，用于根据鼠标指针移动到某一一级菜单时传递的参数值在页面的相应位置显示对应的二级菜单，代码如下：
<script language="javascript">
function Fsubmenu(value){
switch (value){
case "基础":
submenu.innerHTML="<a href='#' target='mainF'>客户信息管理</a>|"+
"<a href='#' target='mainF'>商品信息管理</a>|<a href='#' target='mainF'>供应商信息管理</a>|"+
"<a href='#' target='mainF'>客户信息查询</a>|<a href='#' target='mainF'>商品信息查询</a>|"+
"<a href='#' target='mainF'>供应商信息查询</a>";
break;
case "采购":
submenu.innerHTML="<a href='#' target='mainF'>商品采购</a>|<a href='#' target='mainF'>采购查询</a>";
break;
case "库存":
submenu.innerHTML="<a href='#' target='mainF'>商品入库</a>|"+
"<a href='#' target='mainF'>商品入库退货</a>|<a href='#' target='mainF'>库存查询</a>|"+
"<a href='#' target='mainF'>价格调整</a>";
break;
case "销售":
submenu.innerHTML="<a href='#' target='mainF'>商品销售</a>|"+
"<a href='#' target='mainF'>商品销售退货</a>|<a href='#' target='mainF'>";
break;
case "查询":
submenu.innerHTML="<a href='#' target='mainF'>销售信息查询</a>|"+
"<a href='#' target='mainF'>销售退货查询</a>|<a href='#' target='mainF'>商品入库查询</a>|"+
"<a href='#' target='mainF'>入库退货查询</a>|<a href='#' target='mainF'>商品销售排行</a>|"+
"<a href='#' target='mainF'>年销售额分析</a>";
break;
case "往来":
submenu.innerHTML="<a href='#' target='mainF'>商品销售结账</a>|"+
"<a href='#' target='mainF'>入库退货结账</a>|<a href='#' target='mainF'>销售结帐查询</a>|"+
"<a href='#' target='mainF'>商品入库结账</a>|<a href='#' target='mainF'>销售退货结账</a>|"|
"<a href='#' target='mainF'>入库结账查询</a>";
break;
case "系统":
submenu.innerHTML="<a href='#' target='mainF'>添加操作员</a>|"+
"<a href='#' target='mainF'>更改操作员密码</a>|<a href='#' target='mainF'>删除操作员</a>";
break;
}
}
</script>
举一反三
根据本实例，读者可以：
开发企业网站后台管理模块的导航条；
开发电子商务网站后台管理模块的导航条。
实例049 半透明背景的下拉菜单
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\049
实例说明
网页设计中采用半透明的效果给人以亦真亦幻的感觉，使整个网站更具吸引力，因此笔者将图书馆管理系统的下拉菜单，设置为半透明效果。运行本实例，将鼠标指针移动到“系统设置”等导航超链接上时，在其下方将显示出半透明的下拉式菜单，透过此下拉菜单仍可以看到页面上的内容，例如将鼠标指针移动到“系统设置”超链接上时，其下方会显示出半透明背景的下拉菜单，如图2.24所示。
图2.24 半透明背景的下拉菜单
技术要点
实现半透明背景的下拉菜单，首先需要在页面中实现下拉菜单，然后再通过设置下拉菜单的CSS样式实现半透明效果。下拉菜单的半透明效果功能可以应用CSS样式的透明效果滤镜alpha来实现。透明效果滤镜alpha的语法如下：
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
功能：
alpha属性是把一个目标元素与背景混合。设计者可以指定数据来控制混合的程度。这种“与背景混合”通俗地说是一个元素的透明度。通过指定坐标可以指定点、线、面的透明度。
参数说明：
● opacity：代表透明度水准。默认的范围是0-100，其实是百分比的形式，也就是0代表完全透明，100代表完全不透明。
● finishopacity：可选，如果想要设置渐变的透明效果，可以使用该参数指定结束时的透明度。范围也是0-100。
● style：指定透明区域的形状特征，其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
● startx：代表渐变透明效果的开始x坐标。
● starty：代表渐变透明效果的开始y坐标。
● finishx：代表渐变透明效果的结束x坐标。
● finishy：代表渐变透明效果的结束y坐标。
实现过程
（1）编写实现下拉菜单的JavaScript代码，该代码中主要包括控制下拉菜单的显示和隐藏的自定义函数。由于该段代码属于通用型代码，所以笔者将其保存在一个单独的.JS文件中，名称为menu.JS，在使用该代码的页面只需加入如下代码即可：
<script src="JS/menu.JS"></script>
menu.JS文件的关键代码如下：
var menuOffX=0; //菜单距连接文字最左端距离
var menuOffY=18; //菜单距连接文字顶端距离
var fo_shadows=new Array();
var linkset=new Array();
var IE=document.all&&navigator.userAgent.indexOf("Opera")==-1;
var netscape6=document.getElementById&&!document.all;
var netscape4=document.layers;
//初始化要显示的菜单
function showmenu(e,vmenu,mod){
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu;
clearhidemenu();
IE_clearshadow();
menuobj=IE? document.all.popmenu : netscape6? document.getElementById("popmenu") : netscape4? document.popmenu : "";
menuobj.thestyle=(IE||netscape6)? menuobj.style : menuobj;
if (IE||netscape6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name="other" bgColor="#E6E6E6" width="165" onmouseover="clearhidemenu()"
onmouseout="hidemenu()">'+which+'</layer>');
menuobj.document.close();
}
menuobj.contentwidth=(IE||netscape6)? menuobj.offsetWidth : menuobj.document.other.document.width
menuobj.contentheight=(IE||netscape6)? menuobj.offsetHeight : menuobj.document.other.document.height
eventX=IE? event.clientX : netscape6? e.clientX : e.x
eventY=IE? event.clientY : netscape6? e.clientY : e.y
var rightedge=IE? document.body.clientWidth-eventX : window.innerWidth-eventX;
var bottomedge=IE? document.body.clientHeight-eventY : window.innerHeight-eventY;
if (rightedge<menuobj.contentwidth)
menuobj.thestyle.left=IE? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : netscape6? window.
pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=IE? IE_x(event.srcElement)+menuOffX : netscape6? window.pageXOffset+eventX : eventX
if (bottomedge<menuobj.contentheight&&mod!=0)
menuobj.thestyle.top=IE? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 :
netscape6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=IE? IE_y(event.srcElement)+menuOffY : netscape6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible";
IE_dropshadow(menuobj,"#999999",3);
return false;
}
//计算y轴的坐标
function IE_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
//计算x轴的坐标
function IE_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
//显示菜单
function IE_dropshadow(el, color, size) {
var i;
for (i=size; i>0; i--){
var rect = document.createElement('div');
var rs = rect.style
rs.position = 'absolute';
rs.left = (el.style.posLeft + i) + 'px';
rs.top = (el.style.posTop + i) + 'px';
rs.width = el.offsetWidth + 'px';
rs.height = el.offsetHeight + 'px';
rs.zIndex = el.style.zIndex - i;
rs.backgroundColor = color;
var opacity = 1- i / (i + 1);
rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
fo_shadows[fo_shadows.length] = rect;
}
}
//清除显示
function IE_clearshadow(){
for(var i=0;i<fo_shadows.length;i++){
if (fo_shadows[i])
fo_shadows[i].style.display="none"
}
fo_shadows=new Array();
}
//隐藏菜单
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(IE||netscape6)? "hidden" : "hide"
IE_clearshadow()
}
//动态隐藏
function dynamichide(e){
if (IE&&!menuobj.contains(e.toElement))
hidemenu()
else if(netscape6&&e.currentTarget!=e.relatedTarget&&!contains_netscape6(e.currentTarget,e.relatedTarget))
hidemenu() //隐藏菜单
}
//延迟隐藏菜单
function delayhidemenu(){
if (IE||netscape6||netscape4)
delayhide=setTimeout("hidemenu()",500)
}
//停止延迟隐藏菜单
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if(document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
//设置菜单背景
function overbg(tdbg){
tdbg.style.background='url(Images/item_over.gif)'
tdbg.style.border=' #9CA6C6 1px solid'
}
function outbg(tdbg){
tdbg.style.background='url(Images/item_out.gif)'
tdbg.style.border=''
}
var sysmenu='<table width=80><tr><td id=library onMouseOver=overbg(library)onMouseOut=outbg(library)>
<a href=#>图书馆信息</a></td></tr>\<tr><td id=manager onMouseOver=overbg(manager)onMouseOut=outbg(manager)>
<a href=#>管理员设置</a></td></tr>\<tr><td id=para onMouseOver=overbg(para)onMouseOut=outbg(para)>
<a href=#>参数设置</a></td></tr>\<tr><td id=bookcase onMouseOver=overbg(bookcase)onMouseOut=outbg(bookcase)>
<a href=#>书架设置</a></td></tr>\</table>'
… <!---此处省略了指定其他菜单项的代码->
var sortmenu='<table width=100><tr><td id=readerSort onMouseOver=overbg(readerSort) onMouseOut=outbg(readerSort)>
<a href=#>读者借阅排行榜</a></td></tr>\<tr>
<td id=bookSort onMouseOver=overbg(bookSort) onMouseOut=outbg(bookSort)>
<a href=#>图书借阅排行榜</a></td></tr>\</table>'
（2）在页面中加入导航超链接，同时设置其鼠标的onmouseover和onmouseout事件分别用于控制鼠标指针移入导航超链接上时显示下拉菜单，和鼠标指针移出导航超级链接上时隐藏下拉菜单。关键代码如下：
<a onmouseover=showmenu(event,sysmenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
系统设置</a>┊
<a onmouseover=showmenu(event,readermenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
读者管理</a>┊
<a onmouseover=showmenu(event,bookmenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
图书管理</a>┊
<a onmouseover=showmenu(event,borrowmenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
图书借还</a>┊
<a onmouseover=showmenu(event,querymenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
系统查询</a>┊
<a onmouseover=showmenu(event,sortmenu)onmouseout=delayhidemenu()class='navlink'style="CURSOR:hand">
排行榜</a>
（3）在CSS样式表文件中加入menuskin类选择符，用于设置下拉菜单的半透明效果，代码如下：
.menuskin {
BORDER: #666666 1px solid; VISIBILITY: hidden;
POSITION: absolute;
/*BACKGROUND-COLOR:#EFEFEF;*/
background-image:url("../Images/item_out.gif");
background-repeat : repeat-y;
Filter: Alpha(Opacity=85);
}
（4）在页面中加入<div>标记，id属性为popmenu，用于引用menuskin类选择符设置下拉菜单的半透明效果，代码如下：
<div class=menuskin id=popmenu
onmouseover="clearhidemenu();highlightmenu(event,'on')"
onmouseout="highlightmenu(event,'off');dynamichide(event)"
style="Z-index:100;position:absolute;"></div>
举一反三
根据本实例，读者可以：
开发物资管理系统的导航菜单；
开发办公自动化管理系统的导航菜单；
开发网站后台管理页面的导航菜单。
实例050 弹出式下拉菜单
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\02\050
实例说明
对于习惯使用Windows程序操作界面的用户来说，在网页中使用弹出式下拉菜单无疑是个很好的选择。所谓弹出式下拉菜单是指类似于Windows应用程序的操作菜单的菜单，例如Word的主菜单，但是如何在网页中加入类似这样的弹出式下拉菜单呢？本例将介绍如何利用Fireworks制作在JSP页面中调用的弹出式下拉菜单。运行本实例，将鼠标指针移动到导航条上的导航文字“读者管理”时，在其下方将弹出其相关下拉菜单，再将鼠标指针移动到“读者档案管理”子菜单上时，又将弹出“读者档案管理”项的子菜单，如图2.25所示。
图2.25 弹出式下拉菜单
技术要点
本例中的弹出式下拉菜单，主要是通过Fireworks实现的，具体方法将在实现过程中详细介绍，此处先对“弹出菜单编辑器”中的“内容”选项卡中的“目标”栏的可选值进行详细介绍。在“目标”栏中共有4个选项，各选项的功能如下。
● _blank：指定将链接的目标文件加载到未命名的新浏览器窗口中。
● _parent：指定将链接的目标文件加载到包含链接的父框架页或窗口中，如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中。
● _self：指定将链接的目标文件加载到链接所在的同一框架或窗口中。
● _top：指定将链接的目标文件加载到整个浏览器窗口中，并由此删除所有框架。
说明：弹出“菜单编辑器”中的“内容”选项卡中的“目标”栏的内容也可以是以上4个选项以外的值，前提条件是该下拉菜单必须包含在框架页中，并且指定的值必须是某个框架的名称。
实现过程
（1）在Fireworks中创建一个新的文件，名称为popmenu.png，画布大小为750*33。在该文件中添加6个图层，并在每一层中添加一个导航图片，如图2.26所示。
图2.26 添加导航图片
（2）选择“矩形热点”工具为每一张图片添加热点，完成后的效果如图2.27所示。
图2.27 添加热点
（3）在“读者管理”热点上单击鼠标右键，在弹出的快捷菜单中选择“添加弹出菜单”命令，将弹出“弹出菜单编辑器”对话框，在该对话框中的“文本”栏中输入条目内容，在“链接”栏中输入此条目所链接到的页面的文件名或地址，在“目标”栏中指定链接到的内容在何处显示，在该栏中有4个可选项，具体说明请读者参见本实例的技术要点部分。如果某一菜单项还包括子菜单，可以直接在相应位置输入子菜单项的名称，然后单击该对话框中的
按钮即可。设置完成后的“读者管理”菜单内容如图2.28所示。
（4）单击“继续”按钮，设置菜单的外观，设置完成后再单击“继续”按钮，对菜单的边框和单元格进行详细设置，再单击“继续”按钮，设置菜单和子菜单的位置，最后单击“完成”按钮，完成一个菜单的设置。
图2.28 “弹出菜单编辑器”对话框
（5）重复步骤（3）和步骤（4）的操作，给其他菜单添加下拉菜单。完成后按F12键进行预览。
（6）选择“文件”→“导出”菜单命令将弹出“导出”对话框，在“文件名”文本框中输入文件名后，单击“保存”按钮即可。
（7）接下来的任务就是将设置完成后的菜单应用到网页中了。此时读者需要将生成的HTML文件打开，将<body></body>之间的内容复制到指定网页中需要显示导航条的位置。如果用户想改变超链接的地址，可以直接在代码中修改，也就是将代码location='#'中的“#”号替换为超链接地址。
举一反三
根据本实例，读者可以：
制作各种网站的弹出式下拉菜单。
实例051 弹出式悬浮菜单
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\051
实例说明
弹出式悬浮菜单，适用于网页导航内容比较多，而且容易分类的网站中。采用这种菜单，不但可以使网站的导航内容更加清晰，而且不影响页面的整体效果。本实例将介绍如何实现弹出式悬浮菜单。运行本实例，在页面中将显示“员管理”、“招聘管理”和“薪金管理”等菜单标题，将鼠标指针放置到各菜单标题上时，将弹出悬浮菜单显示该菜单对应的子菜单。例如，将鼠标指针移动到“扫聘管理”菜单上时，将显示该菜单对应的子菜单，如图2.29所示。
图2.29 弹出式悬浮菜单
技术要点
本实例主要应用JavaScript中的style元素对象是HTML对象的display属性实现悬浮菜单的显示和隐藏。style元素对象提供了一组应用于浏览器所支持的CSS属性（如background、fontSize和display等）。使用style对象可以直接获取或设置单个HTML元素的CSS样式。
设置CSS样式表中的属性值的基本语法如下：
object.style.display=属性值
● object：是HTML对象，可以通过对象名或对象ID进行指定，也可以通过document. getElementById(对象ID)进行指定。
● display：用于控制HTML对象的显示方式，具体的显示方式由属性值控制。
● 属性值：用于指定HTML对象的显示方式，常用的属性为block（块对象的默认值，采用该值将在对象后面添加新行）、none（隐藏对象，该属性值与visibility属性的hidden值不同，该属性值不为被隐藏的对象保留其物理空间）和inline（内联对象的默认值，采用该值将从对象中删除行）。
例如，在本实例中，实现“员工管理”的子菜单显示的具体代码如下：
NUser.style.display="block";
实现过程
（1）在页面的适合位置添加一个用于显示导航菜单的<div>标记，并设置该<div>标记的position属性为绝对定位，具体代码如下：
<div style="position:absolute"> </div>
（2）在该<div>标记中添加一个一行7列的表格，并在每个单元格中插入一个表示菜单标题的图片，同时为每个图片设置不同的id属性。关键代码如下：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img id="ImgUser" src="images/NUser_b.GIF" width="106" height="48" border="0">
</td>
<td>
<img id="ImgJob" src="images/NJob_b.GIF" width="110" height="48" border="0">
</td>
<td>
<img id="ImgEducate" src="images/NEducate_b.GIF" width="111" height="48"
border="0">
</td>
<td>
<img id="ImgInstitution" src="images/NInstitution_b.GIF"
width="110" height="48" border="0">
</td>
<td>
<img id="ImgStipend" src="images/NStipend_b.GIF" width="110"
height="48" border="0"><
/td>
<td><a href="#">
<img src="images/NExit_b.GIF" width="98" height="48" border="0" >
</a></td>
<td><img src="images/NNull.GIF" width="130" height="48"></td>
</tr>
</table>
（3）在每张图片的后面，添加一个用于显示子菜单的<div>标记，并在该标记中设计对应的子菜单。例如，显示员工管理的子菜单的具体代码如下：
<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid;
width:200px; position:absolute; display:none; left:1px; top: 34px;">
<table width="100%" border="0" height="35px" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="#">浏览员工信息</a>
<a href="#">添加新员工</a></td>
</tr>
</table>
</div>
（4）编写自定义的JavaScript函数change()，用于改变选中菜单标题的图片，实现鼠标指针移动到图片上时，改变菜单标题的文字颜色，以及控制子菜单是否显示。change()函数的具体代码如下：
<script language="javascript">
function change(img,subMenu,path,type){
//改变选中菜单标题的图片，实现鼠标指针移动到图片上时，改变菜单标题的文字颜色
img.src="images/"+path+".GIF";
if(subMenu!=null){
if(type==0){
subMenu.style.display="none"; //不显示子菜单
}else{
subMenu.style.display="block"; //显示子菜单
}
}
}
</script>
（5）在每个用于放置菜单标题的单元格的<td>标记的onMouseOver事件和onMouseOut事件中调用change()函数，实现显示或隐藏弹出式悬浮菜单。例如，放置“员工管理”菜单标题的<td>标记的具体代码如下：
<td onMouseOver="change(ImgUser,NUser,'NUser_r',1)"
onMouseOut="change(ImgUser,NUser,'NUser_b',0)" style="cursor:hand;">
举一反三
根据本实例，读者可以：
开发企业进销存管理系统的导航条；
开发企业门户网站的后台管理页面的导航条。
实例052 展开式导航条
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\052
实例说明
对于一个企业网站来说，“联系我们”超链接是必不可少的。为了更加引人注意，可以将其制作成具有展开式动画效果的导航条。运行本实例，读者可以看到页面右侧的“联系我们”导航条是慢慢展开的，并且每次刷新页面时，都会以同样的动画效果展开，展开效果如图2.30所示。
图2.30 展开式导航条
技术要点
本例主要通过自定义JavaScript函数ourmove()控制Image对象的height属性值实现。为了实现动画效果，在JavaScript函数中还需要应用setTimeout()方法延迟执行改变图片高度的操作。
注意：调整setTimeout()方法的运行间隔时间的值，可以控制展开的速度，该值以毫秒为单位。
实现过程
（1）在网页中要显示“联系我们”导航条的位置插入一张全部展开后的“联系我们”导航图片，在需要设置超链接的文字上添加图片热点并设置相应的超链接。
（2）将图片的height属性值设置为0，name属性设置为our。
（3）编写自定义的JavaScript函数ourmove()，用于实现图片的展开效果。ourmove()函数的代码如下：
<script language="javascript">
function ourmove(){
if(our.height<163){
our.height=our.height+9;
setTimeout(ourmove,1); //每隔一毫秒调用一次ourmove函数
}
}
</script>
（4）在当前页面的最底部，也就是</body>标记之前，添加如下代码调用ourmove()，实现导航条的展开式动画效果。
<script language="javascript">
ourmove();
</script>
注意：一定要将调用ourmove()函数的代码放在</body>标记之前，否则页面的其他内容就要等到动画显示完毕才可以显示，就达不到预期的效果了。
举一反三
根据本实例，读者可以：
开发企业门户网站的“联系我们”导航条；
开发网站中的二级导航菜单。