2.6 侧导航条设计
在网站设计时有时为了页面的整体效果可以将网站导航条放置在侧面，也称为侧导航条，下面将通过具体实例介绍几种不同样式的侧导航条。
实例053 收缩式导航菜单
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\02\053
实例说明
在网站中不仅可以设置导航条，而且还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，所以很多设计者都采用了收缩式的菜单形式。例如本实例就应用了收缩式导航菜单，运行本实例，当浏览者单击“网站管理”超链接时，页面将展开“网站管理”的子菜单，如图2.31所示；当浏览者再次单击“网站管理”超链接时，展开的收缩式导航菜单又缩回去，页面中不再显示菜单中的内容。
图2.31 收缩式导航菜单
技术要点
主要利用显示隐藏表格的功能来实现收缩式导航菜单的功能，单击导航超级链接，显示当前菜单的内容，隐藏上一个显示的菜单，在隐藏菜单时，让其有规律地隐藏进而实现展开或收缩的动画效果。
实现过程
（1）展开菜单项的自定义函数的代码如下：
<SCRIPT language=javascript>
function show(obj,maxg,obj2){
if(obj.style.pixelHeight<maxg){
obj.style.pixelHeight+=maxg/10;
obj2.background="images/title_hide.gif"; //改变菜单标题的背景
if(obj.style.pixelHeight==maxg/10){
obj.style.display='block'; //设置指定菜单项显示
}
myObj=obj;
mymaxg=maxg;
myObj2=obj2;
setTimeout('show(myObj,mymaxg,myObj2)','5'); //每隔一段时间调用一次show函数，用于实现渐渐展开效果
}
}
</SCRIPT>
（2）收缩菜单项的自定义函数的代码如下：
<SCRIPT language=javascript>
function hide(obj,maxg,obj2){
if(obj.style.pixelHeight>0){
if(obj.style.pixelHeight==maxg/5){
obj.style.display='none'; //设置指定菜单项隐藏
}
obj.style.pixelHeight-=maxg/5;
obj2.background="images/title_show.gif"; //改变菜单标题的背景
myObj=obj;
mymaxg=maxg
myObj2=obj2;
setTimeout('hide(myObj,mymaxg,myObj2)','5'); //每隔一段时间调用一次hide函数，用于实现渐渐收缩效果
}else if(whichContinue){
whichContinue.click();
}
}
</SCRIPT>
（3）单击菜单标题时，隐藏前一个展开的菜单项，显示当前菜单项的代码如下：
<SCRIPT language=javascript>
function change(obj,maxg,obj2){
if(obj.style.pixelHeight){
hide(obj,maxg,obj2); //收缩菜单项
nopen='';
whichcontinue='';
}else if(nopen){ //收缩已经展开的菜单项
whichContinue=obj2;
nopen.click();
}else{
show(obj,maxg,obj2); //展开菜单项
nopen=obj2;
whichContinue='';
}
}
</SCRIPT>
（4）调用函数的方法，代码如下：
<td class="list_title"id="list1"onmouseover="this.typename='list_title2';" onclick="change(menu1,50,list1);"
onmouseout="this.typename='list_title';" background="images/title_show.gif" height="25">网站管理</td>
举一反三
根据本实例，读者可以：
开发电子商务网站的后台管理模块；
开发新闻网的后台管理模块；
开发企业办公自动化系统的导航条。
实例054 树状导航菜单
本实例是一个美化界面、人性化的程序
实例位置：光盘\mingrisoft\02\054
实例说明
对于一个导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面中的导航文字以树状图的形式显示，这样不仅可以有效节约页面，而且也可以方便用户查看。运行本实例，如图2.32所示，在GO购电子商城中的商品分类模块中，就加入了树状导航菜单，在页面的右侧“商品分类”中以树状导航菜单显示商品的分类信息。在默认情况下，第一个节点是展开的，单击该节点名称前的减号“-”可以将该结点折叠；单击节点名称前的加号“+”可以展开指定结点。如果某个节点没有相关子节点，则直接显示减号“-”，同时该节点的名称无超链接。
图2.32 树状导航菜单
技术要点
本例主要通过JavaScript控制表格的行<tr>标记的显示或隐藏来实现节点的显示或隐藏。控制<tr>标记的显示和隐藏，也是通过其display属性实现的，由于<tr>标记的display属性同<div>标记的display属性用法相同，所以这里不再赘述，读者可参考实例040的技术要点。
说明：网页中的<table>、<tr>、<td>、<img>、<form>、<input>、<button>等HTML标记都具有display属性。
实现过程
（1）利用JavaScript定义一个函数ShowTR()，用于显示或隐藏表格中指定行的内容。ShowTR()函数的代码如下：
<script language="javascript">
ShowTR(img1,OpenRep1) //设置第1个节点为展开状态
function ShowTR(objImg,objTr){
if(objTr.style.display==""){ //折叠展开的节点
objTr.style.display = "none";
objImg.src="images/jia.gif"; //改变图标
objImg.alt="展开"; //设置工具提示为“展开”
}else{ //展开折叠的节点
objTr.style.display = "";
objImg.src="images/jian.gif"; //改变图标
objImg.alt="折叠"; //设置工具提示为“折叠”
}
}
</script>
（2）为了实现在默认情况下第一个节点为展开状态，可以在该函数后面加入以下代码，用于当第一个节点包括子节点时，设置第一个节点为展开状态。
<%
if(m>1){ //设置第1个节点为展开状态
out.println("<script language='javascript'>ShowTR(img1,OpenRep1) //设置第1个节点为展开状态</script>");
}%>
（3）从视图V_Type中查询商品的分类信息，代码如下：
<%@ page import="com.core.ConnDB" %>
<%
ConnDB conn=new ConnDB();
ResultSet rs_superType=conn.executeQuery("select ID,superType from V_Type group by ID,superType order by superType desc");
%>
（4）循环显示商品分类信息，并查询各分类中所包括的子类名称，如果该分类有相对应的子类，则在节点前显示加号“+”，否则显示减号“-”。注意：需要为每个包含子节点的节点设置超链接，该超链接执行的操作是调用自定义的JavaScript函数showTR()，实现节点的展开与折叠，代码如下：
<table width="100%"height="40" border="0"cellpadding="0"cellspacing="0">
<%
int ID_superType=0;
String superType="";
int m=1;
while(rs_superType.next()){
ID_superType=rs_superType.getInt(1); //获取大分类的ID
superType=rs_superType.getString(2); //获取大分类名
String sql="select * from V_Type where ID="+ID_superType;
ResultSet rs_subType=conn.executeQuery(sql); //查询指定大分类的小分类信息
String subType="";
int subID=0;
//获取记录总数
rs_subType.last();
int subType_RC=rs_subType.getRow(); //获取小分类的个数
rs_subType.first();
%>
<tr>
<td><%if(subType_RC<=0){%> <!---当大分类不包括小分类时->
<img src="images/jian_null.gif" width="38" height="16" border="0"><%=superType%>
<%}else{%> <!--当大分类包括小分类时-->
<a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)"><img src="images/jia.gif" border="0"alt="展开"
id="img<%=m%>"></a>
<a href="Javascript:ShowTR(img<%=m%>,OpenRep<%=m%>)"><%=superType%></a>
<%}%></td>
<%if (subType_RC>0){%>
<tr id="OpenRep<%=m%>" style="display:none;">
<td colspan="6">
<%do{
subType=rs_subType.getString(3);
subID=rs_subType.getInt(4);
%>
<table width="100%" border="0"cellspacing="0"cellpadding="0">
<tr>
<td height="25"align="center"><table width="90%" border="0"cellspacing="0"cellpadding="0">
<tr onMouseOver="this.style.background='#EEEEEE'" onMouseOut="this.style.background=''">
<td width="15%"> </td>
<td width="10%"align="center"><img src="images/folder.gif"width="16"height="16"border="0"></td>
<td width="75%"><a href="type.jsp?Type=<%=subID%>"><%=subType%></a></td>
</tr>
</table></td>
</tr>
</table>
<% m++; //注意，该条语句一定不能少
}while(rs_subType.next());%></td>
<%}%>
</tr>
<%}%>
</table>
举一反三
根据本实例，读者可以：
开发在线论坛中的论坛管理页面中的应用目录树结构显示主题及回复信息；
开发企业进销存管理系统中的导航菜单；
企业人事管理系统中，在企业内部邮件发送时，根据部门选择收件人。