开发学院网页设计 JavaScript 经典的导航二级式导航菜单完整程序及中文注释,强力... 阅读

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

　2007-11-27 17:41:56　来源：WEB开发网　　　

核心提示：<!--作者语：在CSDN很久了，得到许多热心网友的帮助并收集过很多好的文章，经典的导航二级式导航菜单完整程序及中文注释,强力推荐，无奈自己时间实在有限，一直没为CSDN的网友做过什么贡献，可写成movese(栏目一|栏目二|栏目三**栏目三之一**栏目三之二,lm1.asp|lm2.asp|首个被屏蔽的网址.a

<!--
作者语：在CSDN很久了，得到许多热心网友的帮助并收集过很多好的文章，无奈自己时间实在有限，一直没为CSDN的网友做过什么贡献，现在正好做了个程序，我就写上注释送给大家研究吧：）

以下是我设计的导航栏（因着手简化代码因此忽略其他HTML代码），详细实例请登陆http://www.lshdic.com

以下代码在线测试请登陆http://www.lshdic.com/editdhtml.asp
-->

<HTML>
<HEAD>
<META http-equiv=Content-Type content=text/html; Charset=gb2312>
<META name=GENERATOR content=网络程序员伴侣-Lshdic 2002>
<META NAME =KEYWORDS CONTENT=lshdic,蓝丽网,html,css,javascript,vbscript,asp,sql,dhtml,vml,php,jsp(SUN企业级应用的首选),xml(标准化越来越近了),vrml,vb,vc,delphi,开发,电脑,网络,编程,程序员,下载,软件,网页,编辑器,技术论坛>
<STYLE>
a{text-Decoration:none;}
a:hover{color:blue}
td{font-size:12px;color:555555}
.a1{font-size:14px}
</STYLE>
</HEAD>
<BODY vlink=#6772CD link=#6772CD>
<base href=http://www.lshdic.com/>
<TABLE cellspacing=0 cellpadding=1 width=770 align=center style=border-width:0 bgcolor=#BBE2F5 frame=below rules=none bordercolordark=white bordercolorlight=dddddd id=menutd> 
<TR align=right><td height=25 align=left id=menutd1>　　 
<a href=index.asp style=font-size:13px>回首页</a>
</td>

<Td>
<a href=# style=font-size:13px onmouseover=movese(FlashMtv 经典音乐|DJ舞曲经典电影,happy.asp|happy2.asp)>娱乐视听</a>
<a href=wenzhang.asp style=font-size:13px onmouseover=movese(网络编程语言**Html**Css**JavaScript**VbScript**Dhtml**Vml**ActiveX**Asp**Php**jsp(SUN企业级应用的首选)**Sql+Ado**xml(标准化越来越近了)+*.net**其他网络技术|软件编程语言**Basic+VB**C语言+VC+CB**Java+VJ+J2EE**PB+Delphi**VFP+汇编|-|其他非编程学术|蓝丽所有网友问题|查找所有技术文章,被屏蔽网址**wenzhang.asp?str=Html<font style=display:none>Dhtml&page=1**wenzhang.asp?str=Css&page=1**wenzhang.asp?str=JavaScript/Js<font style=display:none>jsp(SUN企业级应用的首选)&page=1**wenzhang.asp?str=Vbs&page=1**wenzhang.asp?str=Dhtml&page=1**wenzhang.asp?str=Vml&page=1**wenzhang.asp?str=ActiveX&page=1**wenzhang.asp?str=Asp&page=1**wenzhang.asp?str=php&page=1**wenzhang.asp?str=jsp(SUN企业级应用的首选)&page=1**wenzhang.asp?str=Sql/Ado&page=1**wenzhang.asp?str=xml(标准化越来越近了)/.net/Xsl&page=1**wenzhang.asp?str=Fso/Wsh/Htc/正则/Object/iis/pws/Vrml&page=1|被屏蔽网址**wenzhang.asp?str=Basic/VB<font style=display:none>Vbs&page=1**wenzhang.asp?str=C语言/VC/CB&page=1**wenzhang.asp?str=VJ/J2EE/Java<font style=display:none>JavaScript&page=1**wenzhang.asp?str=PB/Delphi&page=1**wenzhang.asp?str=VF/汇编&page=1||wenzhang.asp?str=英语/注册表:/微软/驱动程序/硬件/黑客/加密/解密/攻击/防御/入侵/红客/外语/业界/理论/趋势/破解/工作/程序员/设计师/新闻/社会/讲座/病毒&page=1|wenzhang.asp?str=请问/问题/难题/请教/帮忙/帮助/帮忙/sos/help/解决/有没有/帮帮/救命/救救/急/教我/愁/谁能/能不/可不可/行不/怎么/提问/怎样/才能/能让&page=1|bbs/instr.asp)>技术文章</a>
<a href=download.asp style=font-size:13px onmouseover=movese(编程类工具软件|电子教程|编程素材,download.asp?screen=工具软件&page=1|download.asp?screen=电子教程&page=1|download.asp?screen=编程素材&page=1)>下载中心</a>
<a href=editweb.asp style=font-size:13px onmouseover=movese(进入网页编辑中心|下载编辑网页v2版,editweb.asp|download2.asp?id=48)>编辑网页</a>
<a href=editdhtml.asp style=font-size:13px onmouseover=movese(进入程序编辑中心|下载编写程序v2版,editdhtml.asp|download2.asp?id=92,1000)>编写程序</a>
<a href=lshdic2002.asp title=进行注册,领取Lshdic200X软件序列号的地方 style=font-size:13px onmouseover=movese(查看领取Lshdic序列号|注册购买Lshdic序列号|注册购买流程简介,lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp)>Lshdic</a>
<a href=bbs2.asp style=font-size:13px onmouseover=movese(查看客户所有留言|签写新留言,bbs2.asp|bbs2fatie.asp)>留言我们</a>
<a href=bbs/index.asp style=font-weight:bold onmouseover=movese(网页版面美工设计|网页前台脚本编程|网页后台脚本编程|xml(标准化越来越近了)与Net时代编程|软件开发交流论坛|讨论区及其他学术|-|会员登陆注册入口,bbs/page.asp?dex=网页版面美工设计|bbs/page.asp?dex=网页前台脚本编程|bbs/page.asp?dex=网页后台脚本编程|bbs/page.asp?dex=xml(标准化越来越近了)与Net时代编程|bbs/page.asp?dex=软件开发交流论坛|bbs/page.asp?dex=讨论区及其他学术||bbs/olduser.asp)>程式交流论坛</a>
</td></tr></TABLE>
<script>
var cleartime=1
function movese(menustr,menuhref){　 //添加一级菜单的函数
happydiv.style.display=;happydiv2.style.display=none;if(cleartime!=1)clearTimeout(cleartime)
happydiv.style.posLeft=menutd.offsetLeft+menutd1.offsetWidth+event.srcElement.offsetLeft;happydiv.style.posTop=menutd.offsetTop+menutd.offsetHeight
for(i=0;happydiv.rows.length;i++)happydiv.deleteRow()　 //清除一级菜单中所有单元格
str1=menustr.split(|);str2=menuhref.split(|)
for(i=0;i<str1.length;i++){　　　 //循环给一级菜单添加单元格
tdstr=happydiv.insertRow().insertCell()
if(str1[i].indexOf(**)==-1){　　　　 //如果数据可构成二级菜单则。。。
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>
<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>

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

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>

好了，整个菜单就是这样的，
-->