经典的导航二级式导航菜单完整程序及中文注释[烙饼与馒头]

<!--
作者语：在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,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**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&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&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>"

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

posted on 2006-04-03 15:46 汪杰阅读(305) 评论(0) 编辑收藏引用所属分类: hengxing网站js

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜