经典的导航二级式导航菜单增强版

Posted siwnchs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了经典的导航二级式导航菜单增强版相关的知识，希望对你有一定的参考价值。

作者：lshdic   http://blog.csdn.net/lshdic/
<!--
呵呵我发的上一版相信大家都看过了吧，想一想上一版的确是不怎么华丽，而且上一版是针对表格内的连接A而定位的
而这一版的优点显然比上一版要华丽，速度一样快，而且是针对表格TD来定位的，TIMEOUT设置的也必要合理
以下代码完整范例请登陆 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}
.menu{border-right:0;border-top:0;border-bottom:0;border-left:1 solid white;color:666666}
</STYLE>
</HEAD>
<BODY vlink=#6772CD link=‘#6772CD‘>
<!--导航栏正式制作开始-->
<script>
function window.onerror(){
return true  //防止浏览器未下载完毕用户触发函数时出现错误提示
}
</script>

<!--整个导航栏HTML制作开始,其中并调用MOVESE函数构造一级菜单-->
<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
onmouseover=over2() onmouseout=out2() onclick=click2()>
<TR align=center style=‘cursor:hand;‘>
<td height=20 id=menutd1 style=‘border:1 solid white;border-top:0;border-bottom:1 solid eeeeee;‘
goto=‘index.asp‘ onmouseover="movese(‘返回蓝丽网主页|-|娱乐视听-Flash|娱乐视听-经典电影|技术文章库|下载中心|编辑网页|编写程序|Lshdic2002|留言我们|网友中心-网友软件|网友中心-网友网站|网友中心-网友人才|蓝丽网技术论坛‘,‘index.asp||happy.asp|happy2.asp|wenzhang.asp|download.asp|editweb.asp|editdhtml.asp|lshdic2002.asp|bbs2.asp|friendsoft.asp|friendweb.asp|friendabout.asp|bbs/‘)">
回首页
</td>
<td width=150 style=‘cursor:default;background-color:#BBE2F5;‘ id=menutd2 goto=‘‘></td>
<Td class=menu onmouseover="movese(‘FlashMtv 经典音乐|MTV专集 经典电影‘,‘happy.asp|happy2.asp‘)" goto=‘happy.asp‘>娱乐视听</a>
</td>

<!--这个菜单使用了二级菜单,稍微较长,请自行修改-->
<Td class=menu
onmouseover="movese(‘网络编程语言**Html**Css**JavaScript**VbScript**Dhtml**Vml**ActiveX**Asp**Php**Jsp**Sql+Ado**Xml+*.net**其他网络技术|软件编程语言**Basic+VB**C语言+VC+CB**Java+VJ+J2EE**Delphi**VFP+汇编+Dos+其他|-|其他非编程学术|蓝丽所有网友问题|查找所有技术文章‘,‘被屏蔽网址**wenzhang.asp?str=Html<font style=display:none>Dhtml&page=1**wenzhang.asp?str=Css&page=1**wenzhang.asp?str=JavaScript/Js&lt;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=Delphi&page=1**wenzhang.asp?str=PB/VF/汇编/单片机/苹果机/Dos&page=1||wenzhang.asp?str=英语/注册表:/微软/驱动程序/硬件/黑客/加密/解密/攻击/防御/入侵/红客/外语/业界/理论/趋势/破解/工作/程序员/设计师/新闻/社会/讲座/病毒/转载/原创&page=1|wenzhang.asp?str=请问/问题/难题/请教/帮忙/帮助/帮忙/sos/help/解决/有没有/帮帮/救命/救救/急/教我/愁/谁能/能不/可不可/行不/怎么/提问/怎样/才能/能让/没办法/过来/瞧一&page=1|bbs/instr.asp‘)"
 goto=‘wenzhang.asp‘>技术文章
</td>
<!--具有二级菜单效果的表格制作结束-->

<Td class=menu onmouseover="movese(‘进入下载中心|编程工具|电子教程|编程素材|Lshdic2002配套工具‘,‘download.asp|download.asp?screen=工具软件&page=1|download.asp?screen=电子教程&page=1|download.asp?screen=编程素材&page=1|download.asp?screen=LD配套工具&page=1‘)"
goto=‘download.asp‘>下载中心
</td>
<Td class=menu onmouseover="movese(‘进入网页编辑中心|下载编辑网页v2版‘,‘editweb.asp|download2.asp?id=48‘)"
goto=‘editweb.asp‘>编辑网页
</td>
<Td class=menu onmouseover="movese(‘进入程序编辑中心|下载编写程序v2版‘,‘editdhtml.asp|download2.asp?id=92‘,1000)"
goto=‘editdhtml.asp‘>编写程序
</td>
<Td class=menu align=center title=‘进行注册,领取Lshdic200X软件序列号的地方‘ style=‘font-size:13px‘
onmouseover="movese(‘查看领取Lshdic序列号|注册购买Lshdic序列号|注册购买流程简介‘,‘lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp‘)" goto=‘lshdic2002.asp‘>Lshdic
</td>
<Td class=menu onmouseover="movese(‘查看客户所有留言|签写新留言‘,‘bbs2.asp|bbs2fatie.asp‘)" goto=‘bbs2.asp‘>留言我们
</td>
<Td class=menu
onmouseover="movese(‘网 友 软 件|网 友 网 站|网 友 文 章|网 友 简 历|-|网 友 发 布 平 台‘,‘friendsoft.asp|friendweb.asp|friendword.asp|friendabout.asp||friendftp.asp‘,1000)"
goto=‘friendall.asp‘>网友中心
</td>
<Td class=menu align=center
onmouseover="movese(‘进入蓝丽技术论坛|-|网页版面美工设计|网页前台脚本编程|网页后台脚本编程|Xml与Net时代编程|软件开发交流论坛|讨论区及其他学术|-|会员登陆注册入口‘,‘bbs/||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‘)"
goto=‘bbs/‘>技术论坛
</td></tr></TABLE>
<!--基本导航栏HTML构造结束,以下开始着手编写构造MOVESE等等菜单显示,定位,消失的脚本-->

<script>
var cleartime=1
function movese(menustr,menuhref){   //一级菜单的显示函数,menustr=菜单要显示的文本,menuhref=菜单文本对应的网址
happydiv.style.display=‘‘;        //首先显示的一级菜单
happydiv2.style.display=‘none‘;   //其次将以显示的二级菜单关闭
if(cleartime!=1)clearTimeout(cleartime)    //触发此函数通常是在mouseover时,因此取消"定时关闭菜单"的定时器
happydiv.style.posLeft=menutd.offsetLeft+event.srcElement.offsetLeft;   //一级菜单绝对位置"左"定位
happydiv.style.posTop=menutd.offsetTop+menutd.offsetHeight              //一级菜单绝对位置"上"定位
for(i=0;happydiv.rows.length;i++)happydiv.deleteRow()                   //清除菜单中以有的TD表格数据
str1=menustr.split(‘|‘);str2=menuhref.split(‘|‘)          //将menustr以"|"号分割为数组
for(i=0;i<str1.length;i++){                               //循环显示数据数据开始
tdstr=happydiv.insertRow().insertCell()                   //首先在一级菜单中查入一个<Tr><Td></Td></Tr>
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>"    //MOVEOVER时调用二级菜单显示函数MOVESE2,replace是将指定网址中的特殊字符替换为预定字符
}}
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,2000)   //一切完毕后加上定时关闭菜单,可选
}
function movese2(menustr2,menuhref2){   //二级菜单的显示函数,menustr2=菜单要显示的文本,menuhref=菜单文本对应的网址
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)   //二级菜单定位"上",根据一级菜单中单个TD的高度*第几个计算
for(i=0;happydiv2.rows.length;i++)happydiv2.deleteRow()     //定位完毕,开始显示数据,首先要清除以显示的TD
str3=menustr2.split(‘**‘);str4=menuhref2.split(‘**‘)        //然后分解构成二级菜单的数据
for(i=1;i<str3.length;i++){        //按照数组的大小循环生成单个TD
tdstr2=happydiv2.insertRow().insertCell()     //在二级菜单中插入<Tr><Td></Td></Tr>
tdstr2.innerHTML="<a href=‘"+str4[i].replace(/lshdicstr1/g,‘<‘).replace(/lshdicstr2/g,‘ ‘).replace(/lshdicstr3/g,‘>‘)+"‘>"+str3[i]+"</a>"      //设定具体显示的数据,replace将预定字符替换过来
}
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,2000)  //一切完毕后加上定时关闭菜单,可选
}
function over1(){    //一,二级菜单中MOVEOVER事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘eeeeee‘;event.srcElement.style.borderTop=‘1 solid‘;
event.srcElement.style.borderBottom=‘1 solid‘}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){
event.srcElement.parentElement.bgColor=‘eeeeee‘;event.srcElement.parentElement.style.borderTop=‘1 solid‘;
event.srcElement.parentElement.style.borderBottom=‘1 solid‘}
}
function out1(){     //一,二级菜单中MOVEOUT事件时使用本函数定义菜单效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘‘;event.srcElement.style.borderTop=‘‘;
event.srcElement.style.borderBottom=‘‘
}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){event.srcElement.parentElement.bgColor=‘‘;
event.srcElement.parentElement.style.borderTop=‘‘;event.srcElement.parentElement.style.borderBottom=‘‘}
}
function click1(){     //一,二级菜单时CLICK单击事件时使用本函数转到指定网址
if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags(‘A‘)(0).href
}
function over2(){    //基本的HTML导航栏在MOUSEOVER时使用本函数,设定背景,并清除定时关闭
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘white‘;if(cleartime!=1)clearTimeout(cleartime)}
}
function out2(){     //基本的HTML导航栏在MOUSEOUT时使用本函数,设定背景,并加上定时关闭菜单的效果
if(event.srcElement.tagName=="TD"){event.srcElement.bgColor=‘‘;
cleartime=setTimeout(‘happydiv.style.display="none";happydiv2.style.display="none"‘,500)}
}
function click2(){   //基本的HTML导航栏在CLICK单击时转到的网址,目标网址使用自定义的HTML属性GOTO做目标
location.href=event.srcElement.goto
}
function document.onclick(){    //页面单击时关闭所有菜单
happydiv.style.display=‘none‘;happydiv2.style.display=‘none‘
}
</script>
<table id=happydiv style=‘position:absolute;z-index:5;display:none;cursor:hand;border-top:0;border-bottom:0‘
 bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
onmouseover="over1();clearTimeout(cleartime)"
onmouseout="out1();temp1=‘none‘;cleartime=setTimeout(‘happydiv.style.display=temp1;happydiv2.style.display=temp1‘,500)"
onclick=click1()>
<tr><Td></td></tr>
</table>    <!--一级容器菜单显示表格结束-->
<table id=happydiv2 style=‘position:absolute;z-index:5;display:none;cursor:hand;border-left:0‘
bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white
onmouseover="over1();clearTimeout(cleartime)"
onmouseout="out1();temp1=‘none‘;cleartime=setTimeout(‘happydiv.style.display=temp1;happydiv2.style.display=temp1‘,500)"
onclick=click1()>
<tr><Td></td></tr>
</table>    <!--二级扩展菜单显示表格结束-->

<!--
整个程序就是这样的,乍看来乱不可言,细看来则条理清晰,非常实用,几乎没有多余代码,由于定义了函数,所以移植性和可塑性很强
其中数据为 - 相当于"WINDOWS菜单中的水平线"
-->

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！希望你也加入到我们人工智能的队伍中来！http://www.captainbed.net













































































































































以上是关于经典的导航二级式导航菜单增强版的主要内容，如果未能解决你的问题，请参考以下文章

20款jquery下拉导航菜单特效代码分享

jquery实现的点击二级下拉导航菜单

Axure中继器实现二级导航栏

分享一些经典的特效效果,希望对大家有帮助

html css 求助大神：导航栏菜单问题，二级菜单内容会遮盖掉后面的一级菜单栏选项。

二级导航下拉菜单