2.7 其他
在网站设计时有时为了页面的整体效果可以将网站导航条放置在侧面，也称为侧导航条，下面将通过具体实例介绍几种不同样式的侧导航条。
实例055 自动隐藏的弹出式菜单
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\02\055
实例说明
自动隐藏式菜单简洁易用，在不使用时能自动隐藏，保持页面的清洁，着实为网页增光添彩。运行本实例，将显示图2.33所示的页面，自动隐藏的弹出式菜单收缩在页面的左侧，当鼠标指针移动到菜单标题上时，将自动弹出导航菜单，如图2.34所示，单击某个菜单项，将执行相应的功能；当鼠标指针移出弹出式菜单时，该导航菜单自动隐藏。
图2.33 收缩的导航菜单
图2.34 展开的导航菜单
技术要点
本实例主要利用显示和隐藏<div>标记的方法来实现自动隐藏的弹出式导航菜单。当鼠标指针指向“自动隐藏式菜单”的<div>标记时，显示导航菜单所在的<div>标记，当鼠标指针移出该<div>标记时，隐藏导航菜单。
实现过程
（1）在需要显示隐藏的导航菜单的位置添加一个<div>标记，具体代码如下：
<div>
</div>
（2）在步骤（1）中添加的<div>标记中再添加一个<div>标记，并通过其style属性设置该<div>标记的位置，即导航菜单的位置，关键代码如下：
<div style="position:absolute; float:left; z-index:100;top: 149px;" >
</div>
（3）在步骤（2）中添加的<div>标记中，再添加一个<div>标记，并在该<div>标记中添加一个用于显示导航菜单的表格，该表格的内容通过JavaScript代码进行添加。具体代码如下：
<div id="menu" style="float:left; text-align:center; width:70px; height:302px; padding-top:5px; display:none; background-
image:url(images/menu_bg.gif)">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#666666" style="padding:5px;">
<script language="JavaScript">
var sitems=new Array(); //菜单名称
var sitemlinks=new Array(); //链接地址
sitems[0]="图书介绍";
sitems[1]="新书预告";
sitems[2]="图书销售";
sitems[3]="勘误发布";
sitems[4]="资料下载";
sitems[5]="好书推荐";
sitems[6]="技术支持";
sitems[7]="联系我们";
sitemlinks[0]="http://www.mingrisoft.com";
sitemlinks[1]="http://www.mingrisoft.com";
sitemlinks[2]="http://www.mingrisoft.com";
sitemlinks[3]="http://www.mingrisoft.com";
sitemlinks[4]="http://www.mingrisoft.com";
sitemlinks[5]="http://www.mingrisoft.com";
sitemlinks[6]="http://www.mingrisoft.com";
sitemlinks[7]="http://www.mingrisoft.com";
for(i=0;i<=sitems.length-1;i++){ //通过循环添加各菜单项
if (document.all) {
document.write('<tr><td bgcolor=\'#EBFAFF\' style=\'cursor:hand;\' onclick="window.location.href=\''+sitemlinks[i]+'\'"
onmouseover="this.bgColor=\'#FFFDCD\'" onmouseout="this.bgColor=\'#EBFAFF\'">'+sitems[i]+'</td></tr>');
}else if (document.layers){
document.write('<tr><td bgcolor="white"><a href="'+sitemlinks[i]+'">'+sitems[i]+'</a></td></tr>');
}
}
</script>
</table>
</div>
（4）在步骤（3）中添加的<div>标记的后面，再添加一个<div>标记，并在该<div>标记中添加代表菜单标题的图片，具体代码如下：
<div style="float:left; width:29px; text-align:center;"><img src="images/title.gif" width="29" height="79"> </div>
（5）编写自定义的JavaScript函数mouseover()，用于显示导航菜单，该函数的具体代码如下：
<script language="JavaScript">
function mouseover(divId){
document.getElementById(divId).style.display="block"; //显示菜单
}
</script>
（6）编写自定义的JavaScript函数mouseout()，用于隐藏导航菜单，该函数的具体代码如下：
<script language="JavaScript">
function mouseout(divId){
document.getElementById(divId).style.display="none"; //隐藏菜单
}
</script>
（7）在步骤（2）在添加的<div>标记的onMouseOver事件和onMouseOut事件中分别调用mouseover()函数和mouseout()函数，实现自动隐藏和显示弹出式菜单。关键代码如下：
<div style="position:absolute; float:left; z-index:100;top: 149px;"onMouseOver="mouseover('menu')" onMouseOut="mouseout('menu')">
举一反三
根据本实例，读者可以：
在游戏网中，开发自动隐藏的弹出式菜单；
在企业门户网站中，实现自动隐藏的弹出式菜单。
实例056 调用网页助手小精灵
本实例是一个美化界面、人性化的程序
实例位置：光盘\mingrisoft\02\056
实例说明
在网站中加入网页助手小精灵，当用户访问网站时，向用户问好，或是传递一些网站的重要信息，不仅可以帮助用户快速了解网站，而且可以让用户对该网站留下深刻的印象。本实例将介绍通过JavaScript调用网页助手小精灵的方法。运行本实例，在页面中将显示一个穿蓝色袍子的巫师，并不断做着各种动作，向您问好，或帮您介绍网站，如图2.35所示。
图2.35 调用网页助手小精灵
技术要点
本实例主要通过Microsoft的ActiveX组件Microsoft Agent实现。Microsoft Agent提供了很多控制Agent角色的方法，下面进行详细介绍。
● Load()方法：用于读入要使用的角色，该方法包括两个参数，一个用于指定角色的姓名，另一个用于指定角色存储的文件。
● Show()方法：用于使角色显示在屏幕上。
● Hide()方法：用于隐藏角色。
● Speak()方法：用于实现角色说话，该方法有一个参数，用于指定说话的内容。
● MoveTo ()方法：用于将角色移动到屏幕的指定位置，该方法有两个参数，一个用于指定x轴的坐标，另一个用于指定y轴的坐标。
● Play()方法：用于指定要播放的动画，该方法只有一个参数，用于指定表示动画的字符串，其值包括Announce、Explain、Congratulate、greet、Gestureright、Gestureleft、Gesturedown、Gestureup、Pleased和Read等。
说明：本实例中调用的是Agent的官方角色merlin。应用本实例介绍的方法，还可以调用其他的Agent角色（可以是自己编辑的），不过在调用其他角色时，需要客户端计算机的“系统盘:\WINDOWS\msagent\chars”目录中存在该角色。
实现过程
（1）在需要显示网页助手小精灵的页面的<head>标记中，编写自定义的JavaScript函数loadAgent()，用于装入要使用的角色。loadAgent()函数的具体代码如下：
<script language="javascript">
function loadAgent(id){
try{
id=new ActiveXObject("Agent.Control.2"); //创建一个ActiveX控件
id.Connected = true;
id.Characters.Load("MrAgent","merlin.acs"); //装入要使用的角色
return id;
}catch (err){
return false;
}
}
</script>
（2）在loadAgent()函数的后面编写一个自定义的JavaScript函数controlAgent()，用于调用并控制网页助手小精灵，controlAgent()函数的具体代码如下：
function controlAgent(){
if (agent=loadAgent("agent")){
var mrAgentID="MrAgent";
mrAgent=agent.Characters.Character(mrAgentID); //获取助手对象
mrAgent.MoveTo(200,200); //移动助手
mrAgent.Show(); //显示助手
mrAgent.Play("Explain"); //做解释的手势
mrAgent.Speak("欢迎来到明日科技网站！"); //提示语
mrAgent.Play("Gestureright"); //右手做手势
mrAgent.Play("Pleased"); //做请的手势
mrAgent.Speak("我们的网址：www.cccxy.com"); //提示语
mrAgent.Hide(); //隐藏助手
mrAgent.MoveTo(600,300); //移动助手
mrAgent.Show(); //显示助手
mrAgent.Play("Explain"); //做解释的手势
mrAgent.Play("Read") //作出读书的动作
mrAgent.Speak("我们会热心解决您学习过程中遇到的疑问"); //提示语
mrAgent.Play("Idle1_1"); //做出无所事事的样子
mrAgent.Play("Gestureright"); //右手做手势
mrAgent.Speak("记住我们的网址：www.cccxy.com"); //提示语
mrAgent.Play("greet"); //问候
mrAgent.Speak("感谢您的到来"); //提示语
mrAgent.Play("Idle2_2"); //做出无所事事的样子
mrAgent.Hide(); //隐藏助手
}
}
（3）编写JavaScript代码，实现在页面载入后调用并控制网页助手小精灵，具体代码如下：
window.onload=function(){
controlAgent(); //调用并控制网页助手小精灵
}
举一反三
根据本实例，读者可以：
实现在游戏网中调用网页助手小精灵；
实现门户网站中调用网页助手小精灵。