经典的导航二级式导航菜单完整程序及中文注释,强力推荐[2]

[入库:2005年8月18日] [更新:2007年3月24日]

本文简介:选择自 lshdic 的 blog

if(str1[i]!="-")tdstr.innerhtml="<a href='"+str2[i]+"'>"+str1[i]+"</a>";else tdstr.innerhtml="<hr size=1 color=#8bb4d9>"
}else{       //如果数据不可构成二级菜单则。。。
str3=str1[i].split('**')
tdstr.innerhtml="<font onmouseover=movese2('"+str1[i]+"','"+str2[i].replace(/</g,"lshdicstr1").replace(/ /g,"lshdicstr2").replace(/>/g,"lshdicstr3")+"')>"+str3[0]+" →</font>"   //由于字符中有与html冲突的字符因而替换
}}
cleartime=settimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000)    //2秒后关闭所有菜单
}
function movese2(menustr2,menuhref2){   //添加二级菜单的函数
happydiv2.style.display='';if(cleartime!=1)cleartimeout(cleartime)
happydiv2.style.posleft=happydiv.offsetleft+happydiv.offsetwidth;
temptop1=event.srcelement.parentelement.parentelement
happydiv2.style.postop=happydiv.offsettop+(temptop1.offsetheight*temptop1.rowindex)    //二级菜单定位
for(i=0;happydiv2.rows.length;i++)happydiv2.deleterow()
str3=menustr2.split('**');str4=menuhref2.split('**')
for(i=1;i<str3.length;i++){
tdstr2=happydiv2.insertrow().insertcell()
tdstr2.innerhtml="<a href='"+str4[i].replace(/lshdicstr1/g,'<').replace(/lshdicstr2/g,' ').replace(/lshdicstr3/g,'>')+"'>"+str3[i]+"</a>"   //由于字符中有与html冲突的字符因而替换
}
cleartime=settimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000)    //2秒后关闭所有菜单
}
function over1(){          //鼠标移动到菜单单元格移动处加上边框和背景色
if(event.srcelement.tagname=="td"){event.srcelement.bgcolor='eeeeee';event.srcelement.style.border='1 solid black'}else if(event.srcelement.tagname=="a"||event.srcelement.tagname=="font"){event.srcelement.parentelement.bgcolor='eeeeee';event.srcelement.parentelement.style.border='1 solid black'}
}
function out1(){          //鼠标在菜单单元格移动处将边框和背景去掉
if(event.srcelement.tagname=="td"){event.srcelement.bgcolor='';event.srcelement.style.border=''}else if(event.srcelement.tagname=="a"||event.srcelement.tagname=="font"){event.srcelement.parentelement.bgcolor='';event.srcelement.parentelement.style.border=''}
}
function click1(){        //菜单内单元格单击事件
if(event.srcelement.tagname=="td")location.href=event.srcelement.all.tags('a')(0).href
}
function document.onclick(){      //页面单击关闭所有菜单
happydiv.style.display='none';happydiv2.style.display='none'
}
function window.onerror(){
return true                   //以外扩展以外错误取消
}
</script>
<table id=happydiv style='position:absolute;z-index:5;display:none;cursor:hand;' bgcolor=#bbe2f5 onmouseover="over1();cleartimeout(cleartime)" onmouseout="out1();temp1='none';cleartime=settimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',2000)" onclick=click1()>
<tr><td></td></tr>
</table><!--大类菜单表格结束,大类表格调用了over(),out1(),click1()函数-->
<table id=happydiv2 style='position:absolute;z-index:5;display:none;cursor:hand;' bgcolor=#bbe2f5 onmouseover="over1();cleartimeout(cleartime)" onmouseout="out1();temp1='none';cleartime=settimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',2000)" onclick=click1()>
<tr><td></td></tr>
</table><!--小类菜单表格结束,小类表格也调用了over(),out1(),click1()函数-->

 


<!--
菜单完成了,将一下两个重要函数

movese(menustr,menuhref)

构建一级菜单的函数,可写成movese("栏目一|栏目二|栏目三**栏目三之一**栏目三之二","lm1.asp|lm2.asp|首个被屏蔽的网址.asp**lm3z1.asp**lm3z2.asp")

movese2(menustr2,menuhref2)

构建二级菜单的函数,这个必须在一级菜单中生成了请看

tdstr.innerhtml="<font onmouseover=movese2('"+str1[i]+"','"+str2[i].replace(/</g,"lshdicstr1").replace(/ /g,"lshdicstr2").replace(/>/g,"lshdicstr3")+"')>"+str3[0]+" →</font>"

好了,整个菜单就是这样的,

本文关键:菜单 导航栏 element offset
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top