仿QQ2003风格的导航栏

　　这是2003年12月***的网站导航栏，本来想改成基于OOP再放上来的，现在看来今年内都不可能实现了，先公布了再算。


　　效果见右图，它两个脚本和HTML页面组成，下面是详细代码，演示内容可以从http://www.freewebs.com/kacarton/software/outlookbar.rar(7K)下载：

脚本支持代码OutlookBar.js内容：
/*======================================================================
OutlookBar 支持脚本
DESIGN BY : 彭国辉
DATE: 2003.12-2004-3
SITE: http://kacarton.yeah.net/
BLOG: http://blog.csdn.net/nhconch
EMAIL: kacarton@sohu.com
文章为作者原创，转载前请先与本人联系，转载请注明文章出处、保留作者信息，谢谢支持！
========================================================================*/
var bar_open = false;
var active_bar = null;
var timer = null;
function Bar_Click(obj)
{
var bar = document.getElementById("first_bar");
if (bar==null || obj==null) return;
bar = bar.nextSibling;
while (bar)
{
if (bar.extend!="MenuBar") bar.style.display="none";
bar = bar.nextSibling;
}
active_bar = obj;
obj.nextSibling.style.display='block';
ScrollButton_MoveTo(obj.nextSibling);
}
function Item_Click(obj)
{
if (obj==null) return;
mainfrm = document.getElementById("main");
mainfrm.src = obj.href;
}
function Item_MouseDown(obj)
{
obj.style.borderWidth=1;
obj.style.borderTopColor="#666666";
obj.style.borderBottomColor="#FFFFFF";
obj.style.borderLeftColor="#666666";
obj.style.borderRightColor="#FFFFFF";
}
function Item_MouseUp(obj)
{
Item_MouseOver(obj);
}
function Item_MouseOver(obj)
{
if (obj==null) return;
obj.style.borderWidth=1;
obj.style.borderTopColor="#FFFFFF";
obj.style.borderBottomColor="#666666";
obj.style.borderLeftColor="#FFFFFF";
obj.style.borderRightColor="#666666";
}
function Item_MouseOut(obj)
{
if (obj==null) return;
obj.style.borderWidth=0;
}
function ScrollButton_MoveTo(obj)
{
var scroll_btn_up = document.getElementById("scroll_btn_up");
var scroll_btn_dn = document.getElementById("scroll_btn_dn");
if (obj==null || scroll_btn_up==null || scroll_btn_dn==null) return;
scroll_btn_up.style.pixelLeft = obj.offsetParent.offsetWidth-19;//scroll_btn_up.offsetWidth;
scroll_btn_up.style.pixelTop = obj.offsetTop+25;//scroll_btn_up.offsetHeight+6;
scroll_btn_dn.style.pixelLeft = obj.offsetParent.offsetWidth-19;//scroll_btn_up.offsetWidth;
scroll_btn_dn.style.pixelTop = obj.offsetTop+obj.offsetHeight;
var client = obj.children[0].children[0];
if (client.offsetHeight==client.children[0].offsetHeight)
{
scroll_btn_up.style.display="none";
scroll_btn_dn.style.display="none";
}
else
{
if (client.scrollTop<=0)
scroll_btn_up.style.display="none";
else
scroll_btn_up.style.display="block";
if (client.offsetHeight+client.scrollTop>=client.children[0].offsetHeight)
scroll_btn_dn.style.display="none";
else
scroll_btn_dn.style.display="block";
}
}
function setScrollBtn() {if (active_bar) ScrollButton_MoveTo(active_bar.nextSibling);}
function scrollStart(step)
{
if (active_bar==null) return;
var obj = active_bar.nextSibling.children[0].children[0];
if (obj==null) return;
obj.scrollTop+=step;
if (obj.scrollTop>0 && obj.scrollTop+obj.offsetHeight<obj.children[0].offsetHeight)
timer = setTimeout("scrollStart("+step+")", 100);
else
setScrollBtn();
}
function scrollStop()
{
clearTimeout(timer);
}
function addBar(caption)
{
if (bar_open) barEnd();
bar_open = true;
document.write("<tr onclick=/"Bar_Click(this)/" height=19 extend=/"MenuBar/" style=/"cursor: hand/">/n"
+ " <td valign=middle width=6><img src=/"../image/btn_left.gif/" width=6 height=19 border=0></td>/n"
+ " <td valign=middle width=100% align=center background=/"../image/btn_mid.gif/">"+caption+"</td>/n"
+ " <td valign=middle width=6><img src=/"../image/btn_right.gif/" width=6 height=19 border=0></td>/n"
+ "</tr><tr style=/"display:none/"><td colspan=3 valign=top>/n"
+ " <div style='height:100%;width:100%;overflow:hidden;' onresize='setScrollBtn();';>"
+ "<table width=100% border=0 align=center valign=top>");
}
function barEnd()
{
document.write("</table></div></td></tr>/n");
bar_open = false;
}
function addItem(caption, href)
{
if (caption==null || href==null) return;
document.write("<tr height=20><td align=center valign=middle onmousedown=/"Item_MouseDown(this)/" onmouseup=/"Item_MouseUp(this)/" onmouseenter=/"Item_MouseOver(this)/" onmouseout=/"Item_MouseOut(this)/" onclick=/"Item_Click(this)/" href=/""+href+"/" style=/"border:0 solid; BORDER-LEFT-COLOR: #FFFFF; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #FFFFF; BORDER-RIGHT-COLOR: #666666;cursor: hand/">"+caption+"</td></tr>/n");
}
function showFirst()
{
var bar = document.getElementById("first_bar");
if (bar==null) return;
bar = bar.nextSibling;
while (bar && bar.extend!="MenuBar") bar = bar.nextSibling;
if (bar.extend=="MenuBar") Bar_Click(bar);
}
function showOutlookBar()
{
document.write("<table width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center valign=top>/n"
+ "<tr height=0 style=/"display:none/" id=/"first_bar/"><td></td></tr>/n");
showItems();
if (bar_open) barEnd();
document.write("</table>/n"
+ "<input id=/"scroll_btn_up/" type=image src=/"../image/scrlbtnup.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(-20);' onmouseup='scrollStop();' onclick='return false;'>/n"
+ "<input id=/"scroll_btn_dn/" type=image src=/"../image/scrlbtndn.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(20);' onmouseup='scrollStop();' onclick='return false;'>/n");
showFirst();
}

导航内容脚本代码MenuBar.js（改变导航内容更改此文件即可）：
function showItems()
{
addBar("个人资料");
addItem("修改资料","1.htm");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://kacarton.yeah.net");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("我的网站","http://kacarton.yeah.net");
addItem("个人作品","http://blog.csdn.net/nhconch");
addItem("========","changepsw.asp");
addBar("供应信息");
addItem("供应信息1","1.htm");
addItem("我的信息1","2.htm");
addBar("需求信息");
addItem("需求信息2","3.htm");
addItem("我的信息2","4.htm");
addBar("合作项目");
addItem("需求信息2","3.htm");
addItem("我的信息2","4.htm");
addBar("人才专栏");
addItem("需求信息2","3.htm");
addItem("我的信息2","4.htm");
addBar("人才专栏");
addItem("需求信息2","3.htm");
addItem("我的信息2","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
addBar("测试栏目");
addItem("测试栏目","3.htm");
addItem("测试栏目","4.htm");
}

演示页outlookbar.htm内容：
<HTML>
<HEAD>
<TITLE>会员中心</TITLE>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="Javascript" SRC="../lib/outlookbar.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="menubar.js"></SCRIPT>
</HEAD>
<BODY topmargin="0" leftmargin="1">
<TABLE border="0" width="100%" height=100% cellspacing="0" cellpadding="0">
<TR>
<TD width=120 valign=top bgcolor="#F2F2F2" style="border:1 solid #5A8AEF">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="2" bgcolor="#5A8AEF">
<tr>
<td width=100% height="18" background="../image/navbar.gif"><span><font color=#FFFFFF><b>    会员中心</b></font></span></td>
<td width=10 background="../image/navbar.gif"><img src="../image/closebtn.gif" width="13" height="13" alt="注销" border=0 onclick="location='../logout.asp';"></td>
</tr>
<tr>
<td bgcolor="#F2F2F2" valign=top colspan=2><SCRIPT LANGUAGE="Javascript">showOutlookBar();</SCRIPT></td>
</tr>
</table>
<td valign=top>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height=100%>
<tr>
<td height="100%" colspan="2">
<iframe name="main" frameborder=0 width=100% scrolling=yes height=100% src="about:blank"></iframe>
</td>
</tr>
</table>
</td>
</TR>
</TABLE>
</BODY>
</HTML>