WEB开发网
开发学院网页设计JavaScript 经典的导航二级式导航菜单增强版,不看不知道!! 阅读

经典的导航二级式导航菜单增强版,不看不知道!!

 2007-11-27 17:41:43 来源:WEB开发网   
核心提示:<!--呵呵我发的上一版相信大家都看过了吧,想一想上一版的确是不怎么华丽,经典的导航二级式导航菜单增强版,不看不知道!!,而且上一版是针对表格内的连接A而定位的而这一版的优点显然比上一版要华丽,速度一样快

<!--
呵呵我发的上一版相信大家都看过了吧,想一想上一版的确是不怎么华丽,而且上一版是针对表格内的连接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(SUN企业级应用的首选),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(SUN企业级应用的首选)**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<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=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菜单中的水平线
-->

Tags:经典 导航 二级

编辑录入:coldstar [复制链接] [打 印]
赞助商链接