代码:
var bar_open = false;
var active_bar = null;
var timer = null;
var hasShow = true;
function IsSpace(strMain){
var strComp=strMain;
try{
if (strComp==" " || strComp=="" || strComp==" " || strComp==null || strComp=="null" || strComp.length==0 || typeof strMain == "undefined" || strMain == "undefined" ) {
return true;
}else{
return false;
}
}catch(e){return false; }
}
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;
}
if(active_bar==obj){
if(hasShow){
last_bar.style.display='none';
obj.nextSibling.style.display='block';
hasShow=false;
}else{
obj.nextSibling.style.display='none';
last_bar.style.display='block';
hasShow=true;
scroll_btn_up.style.display="none";
scroll_btn_dn.style.display="none";
}
}else{
last_bar.style.display='none';
obj.nextSibling.style.display='block';
hasShow=false;
}
active_bar = obj;
}
function Item_Click(obj){
if (obj==null) return;
if(obj.target!=null){
window.open(obj.href,obj.target,"");
return;
}
mainfrm = document.getElementById("main");
if(mainfrm==null){
return;
}else{
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-30;//scroll_btn_up.offsetWidth;
scroll_btn_up.style.pixelTop = obj.offsetTop+19;//scroll_btn_up.offsetHeight+6;
scroll_btn_dn.style.pixelLeft = obj.offsetParent.offsetWidth-30;//scroll_btn_up.offsetWidth;
scroll_btn_dn.style.pixelTop = obj.offsetTop+obj.offsetHeight-19;
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,background)
{
if (bar_open) barEnd();
bar_open = true;
var _background="images/css/default/left.gif";
if(IsSpace(background)==false){
_background = "images/css/default/left.gif";
}
document.write("<tr οnclick=/"Bar_Click(this)/" height=19 extend=/"MenuBar/" style=/"cursor: hand/">/n"
+ " <td valign=middle align=center><table width=/"115/" height=/"26/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" background=/""+_background+"/">/n"
+ "<tr><td align=/"center/" class=/"leftfont/">"+caption+"</td></tr></table></td>"
+ "</tr><tr style=/"display:none/"><td valign=top align=center>/n"
+ " <div style='height:100%;width:88%;overflow:hidden;' οnresize='setScrollBtn();';>"
+ "<table width=88% border=0 align=center valign=top>");
}
function barEnd()
{
document.write("</table></div></td></tr>/n");
bar_open = false;
}
function addItem(caption, href,target,bgImage)
{
var _target="_self";
if (caption==null || href==null) return;
if(target!=null) _target=target;
var _bgImage = "";
if(IsSpace(bgImage)==false) _bgImage = " background=/"/image/menu/"+bgImage+"/" ";
document.write("<tr height=20><td align=center valign=middle οnmοusedοwn=/"Item_MouseDown(this)/" οnmοuseup=/"Item_MouseUp(this)/" οnmοuseenter=/"Item_MouseOver(this)/" οnmοuseοut=/"Item_MouseOut(this)/" οnclick=/"Item_Click(this)/" target=/""+_target+"/" href=/""+href+"/" style=/"border:0 solid; BORDER-LEFT-COLOR: #FFFFF; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #FFFFF; BORDER-RIGHT-COLOR: #666666;cursor: hand/" "+_bgImage+">"+caption+"</td></tr>/n");
}
function showBar(barid)
{
var bar = document.getElementById("first_bar");
if (bar==null) return;
for(var bi=1;bi<barid;bi++)
{
bar = bar.nextSibling;
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 id=tab1>/n"
+ "<tr height=0 style=/"display:none/" id=/"first_bar/"><td></td></tr>/n");
showItems();
if (bar_open) barEnd();
document.write("<tr style=/"display:none/" id=/"last_bar/"><td colspan=3 valign=top>/n"
+ "<div style='height:100%;width:100%;overflow:hidden;'>/n"
+ "<table width=100% border=0 align=center valign=top><tr>/n"
+ "<td></td></tr></table></div></tr>");
document.write("</table>/n"
+ "<input id=/"scroll_btn_up/" type=image src=/"images/css/default/up.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' οnmοusedοwn='scrollStart(-20);' οnmοuseup='scrollStop();' οnclick='return false;'>/n"
+ "<input id=/"scroll_btn_dn/" type=image src=/"images/css/default/down.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' οnmοusedοwn='scrollStart(20);' οnmοuseup='scrollStop();' οnclick='return false;'>/n");
showBar(1);
}
把上面的另存为qqmenu.js
使用方法,
1.引入qqmenu.js
2.动态增加菜单并显示代码:
<SCRIPT language="Javascript">
function showItems(){
addBar('菜单一');
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addBar('菜单二');
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
}
showOutlookBar();
</SCRIPT>