📄 dhtml
字号:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002">
<STYLE>
a{text-Decoration:none;}
a:hover{color:red;text-Decoration:underline}
td{font-size:12px}
</STYLE>
</HEAD>
<BODY alink='red' vlink='#6772CD' link='#6772CD' style='margin:1;'>
<table width='770' align=center cellspacing=0 cellpadding=0><tr><Td>
<!--以下为左方导航表-->
<TABLE cellspacing=0 cellpadding=0 width=135 align='left' bgcolor='#BBE2F5' rules=none frame=lhs bordercolordark=white bordercolorlight=dddddd border=1>
<TR>
<Td valign=top height=722 id=myid2><img src='image/right.gif'> <A href='newuser.asp' style='color:Red'>注册会员</a> <a href='olduser.asp' style='color:red'>会员登陆</a><p>
注册会员:1171人<br>
当前在线:2人<br>
今日访问:6次<br>
总共访问:245次
<p> <br>用户:<a href='ismy.asp?user=Lshdic' target='_blank'>Lshdic</a><br>
<img src='image/user25.gif' width='60' height='60' align=left>
经验:20305<br>
身份:版主<br>
<a href='exitbbs.asp?user=lshdic' style='color:green'>退出登陆</a><br>
<a href='xiougai.asp' style='color:green'>修改档案</a><p> <br>
┏论坛栏目┓<A href='../index.asp' style='color:red'>首页</a> <A href='index.asp' style='color:red'>论坛</a><p>
<TABLE cellspacing=0 cellpadding=2 width=100% id=instrtab><tr><Td>
1:<A href='page.asp?dex=网页版面美工设计' style='color:1210dd'>网页版面美工设计</a><p>
2:<a href='page.asp?dex=网页前台脚本编程' style='color:1210dd'>网页前台脚本编程</a><p>
3:<a href='page.asp?dex=网页后台脚本编程' style='color:1210dd'>网页后台脚本编程</a><p>
4:<a href='page.asp?dex=Xml与Net时代编程' style='color:1210dd'>Xml与Net时代编程</a><p>
5:<a href='page.asp?dex=软件开发交流论坛' style='color:1210dd'>软件开发交流论坛</a><p>
6:<a href='page.asp?dex=讨论区及其他学术' style='color:1210dd'>讨论区及其他学术</a><p align=left>┏会员特有权利┓___<p style='line-height:1.5'>
1:<a href='instr.asp' style='color:A36424;font-weight:bold'>搜索所有帖子</a><br>
2:<a href='instr2.asp?page=1&strs=lshdic&rad1=作者&dex=网页版面美工设计,网页前台脚本编程,网页后台脚本编程,网站站长经验交流,软件开发交流论坛,蓝丽论坛站务讨论' style='color:A36424;font-weight:bold'>我提出过的问题</a><br>
3:<a href='duanxiaoxi.asp?page=1' style='color:A36424;font-weight:bold'>收发短消息</a><br>
4:<a href='jinghua.asp?dex=网页前台脚本编程' style='color:A36424;font-weight:bold'>显示本版精华贴OK</a><br>
5:<a href='../wenzhang.asp' style='color:A36424;font-weight:bold'>技术文章库</a><br>
6:<a href='../friendabout.asp' style='color:A36424;font-weight:bold' target='_blank'>论坛会员档案库</a><p>
<a href='http://www.lshdic.com/bbs'>©蓝丽论坛v<font color=red>2003.1</font></a>
</td></tr></table>
</td></TR></TABLE>
<script>
function window.onload(){
try{
myid2.height=window.document.body.scrollHeight}
catch(e){}
}
</script>
<TITLE>原创:蓝丽导航栏菜单制作步骤完整程序+注释 -- Lshdic程序员论坛</TITLE>
<!--以下为右方内容表-->
<TABLE cellspacing=0 cellpadding=3 width=635 bordercolordark='white' bordercolorlight='black' cellspacing=0 cellpadding=0 border=1 rules=none frame=rhs>
<tr><td bgcolor=#6F81BC style='color:white' colspan=2><img src='image/redfile.gif' width=13 height=13> <b>主题</b>:原创:蓝丽导航栏菜单制作步骤完整程序+注释 来自<a href='page.asp?dex=网页前台脚本编程' style='color:yellow'>网页前台脚本编程</a>,阅读146次
</td></tr><Tr bgcolor=eeeeee>
<Td width=120 align=center valign=top> <br>
<img src='image/user25.gif' height=90 width=90>
<br>楼主:<a href='ismy.asp?user=lshdic' target="_blank" title='点击查看lshdic的资料'>lshdic</a><br>经验:20305点<br><font color=#6772CD>神终级:宿命传说</font><br>02-11-27 13:57:53<br>
给作者<a href='duanxiaoxi.asp?emailto=Lshdic'>发送短消息</a><br><p><a href='userboos.asp?dex=网页前台脚本编程&areyou=编辑&myclass=542&isdex=true&page=1'>编辑</a> <a href='userboos.asp?dex=网页前台脚本编程&areyou=锁定&myclass=542&isdex=true&page=1'>锁定</a> <a href='userboos.asp?dex=网页前台脚本编程&areyou=转移&myclass=542&isdex=true'>转移</a> <a href=javascript:if(confirm('确实要删除该贴吗?'))location='userboos.asp?dex=网页前台脚本编程&areyou=删除&myclass=542&isdex=true'>删除</a>
<script>
function openw(values){
open1=window.open('','','resizable=1,scrollbars=1,menubar=0,toolbar=0,directories=0');
open1.document.open()
open1.document.write(values);
open1.document.close()
}
</script>
</td><td valign=top name=tds1>
<div style='word-Break:break-all;overflow:auto;width:490;line-height:1.5;border:1 solid orange;padding:5;border-top:0;border-right:0' id=htmdiv1>
<HTML><br><HEAD><br><META http-equiv="Content-Type" content="text/html; Charset=gb2312"><br><META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002"><br><META NAME ="KEYWORDS" CONTENT="lshdic,蓝丽网,html,css,javascript,vbscript,asp,sql,dhtml,vml,php,jsp,xml,vrml,vb,vc,delphi,开发,电脑,网络,编程,程序员,下载,软件,网页,编辑器,技术论坛"><br><STYLE><br>a{text-Decoration:none;}<br>a:hover{color:blue}<br>td{font-size:12px;color:555555}<br>.menu{border-right:0;border-top:0;border-bottom:0;border-left:1 solid white;color:666666}<br></STYLE><br></HEAD><br><BODY vlink=#6772CD link='#6772CD'><br><!--导航栏正式制作开始--><br><script><br>function window.onerror(){<br>return true //防止浏览器未下载完毕用户触发函数时出现错误提示<br>}<br></script><br><br><!--整个导航栏HTML制作开始,其中并调用MOVESE函数构造一级菜单--><br><TABLE cellspacing=0 cellpadding=1 width=770 align=center style='border-width:0' bgcolor='BBE2F5'<br> frame=below rules=none bordercolordark=white bordercolorlight=dddddd id=menutd <br>onmouseover=over2() onmouseout=out2() onclick=click2()><br><TR align=center style='cursor:hand;'><br><td height=20 id=menutd1 style='border:1 solid white;border-top:0;border-bottom:1 solid eeeeee;' <br>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/')"><br>回首页<br></td><br><td width=150 style='cursor:default;background-color:#BBE2F5;' id=menutd2 goto=''></td><br><Td class=menu onmouseover="movese('FlashMtv 经典音乐|MTV专集 经典电影','happy.asp|happy2.asp')" goto='happy.asp'>娱乐视听</a> <br></td><br><br><!--这个菜单使用了二级菜单,稍微较长,请自行修改--><br><Td class=menu <br>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')"<br> goto='wenzhang.asp'>技术文章<br></td><br><!--具有二级菜单效果的表格制作结束--><br><br><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')" <br>goto='download.asp'>下载中心<br></td><br><Td class=menu onmouseover="movese('进入网页编辑中心|下载编辑网页v2版','editweb.asp|download2.asp?id=48')" <br>goto='editweb.asp'>编辑网页<br></td><br><Td class=menu onmouseover="movese('进入程序编辑中心|下载编写程序v2版','editdhtml.asp|download2.asp?id=92',1000)" <br>goto='editdhtml.asp'>编写程序<br></td><br><Td class=menu align=center title='进行注册,领取Lshdic200X软件序列号的地方' style='font-size:13px' <br>onmouseover="movese('查看领取Lshdic序列号|注册购买Lshdic序列号|注册购买流程简介','lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp')" goto='lshdic2002.asp'>Lshdic<br></td><br><Td class=menu onmouseover="movese('查看客户所有留言|签写新留言','bbs2.asp|bbs2fatie.asp')" goto='bbs2.asp'>留言我们<br></td><br><Td class=menu <br>onmouseover="movese('网 友 软 件|网 友 网 站|网 友 文 章|网 友 简 历|-|网 友 发 布 平 台','friendsoft.asp|friendweb.asp|friendword.asp|friendabout.asp||friendftp.asp',1000)" <br>goto='friendall.asp'>网友中心<br></td><br><Td class=menu align=center <br>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')" <br>goto='bbs/'>技术论坛<br></td></tr></TABLE><br><!--基本导航栏HTML构造结束,以下开始着手编写构造MOVESE等等菜单显示,定位,消失的脚本--><br><br><script><br>var cleartime=1<br>function movese(menustr,menuhref){ //一级菜单的显示函数,menustr=菜单要显示的文本,menuhref=菜单文本对应的网址<br>happydiv.style.display=''; //首先显示的一级菜单<br>happydiv2.style.display='none'; //其次将以显示的二级菜单关闭<br>if(cleartime!=1)clearTimeout(cleartime) //触发此函数通常是在mouseover时,因此取消"定时关闭菜单"的定时器<br>happydiv.style.posLeft=menutd.offsetLeft+event.srcElement.offsetLeft; //一级菜单绝对位置"左"定位<br>happydiv.style.posTop=menutd.offsetTop+menutd.offsetHeight //一级菜单绝对位置"上"定位<br>for(i=0;happydiv.rows.length;i++)happydiv.deleteRow() //清除菜单中以有的TD表格数据<br>str1=menustr.split('|');str2=menuhref.split('|') //将menustr以"|"号分割为数组<br>for(i=0;i<str1.length;i++){ //循环显示数据数据开始<br>tdstr=happydiv.insertRow().insertCell() //首先在一级菜单中查入一个<Tr><Td></Td></Tr><br>if(str1[i].indexOf('**')==-1){ //如果是不构成显示二级菜单的数据,以**做判断<br>if(str1[i]!="-")tdstr.innerHTML="<a href='"+str2[i]+"'>"+str1[i]+"</a>";else tdstr.innerHTML="<hr size=1 color=#8BB4D9>"<br>}else{ //如果是能构成二级菜单的数据则...<br>str3=str1[i].split('**') //开始构件二级菜单驱动的显示字符<br>tdstr.innerHTML="<font onmouseover=movese2('"+str1[i]+"','"+str2[i].replace(/</g,"lshdicstr1").replace(/ /g,"lshdicstr2").replace(/>/g,"lshdicstr3")+"')>"+str3[0]+" →</font>" //MOVEOVER时调用二级菜单显示函数MOVESE2,replace是将指定网址中的特殊字符替换为预定字符<br>}}<br>cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选<br>}<br>function movese2(menustr2,menuhref2){ //二级菜单的显示函数,menustr2=菜单要显示的文本,menuhref=菜单文本对应的网址<br>happydiv2.style.display=''; //第一步自然是先显示二级菜单的容器表格<br>if(cleartime!=1)clearTimeout(cleartime) //第二步自然是清除定时器关闭的设置<br>happydiv2.style.posLeft=happydiv.offsetLeft+happydiv.offsetWidth; //二级菜单定位"左"<br>temptop1=event.srcElement.parentElement.parentElement<br>happydiv2.style.posTop=happydiv.offsetTop+(temptop1.offsetHeight*temptop1.rowIndex) //二级菜单定位"上",根据一级菜单中单个TD的高度*第几个计算<br>for(i=0;happydiv2.rows.length;i++)happydiv2.deleteRow() //定位完毕,开始显示数据,首先要清除以显示的TD<br>str3=menustr2.split('**');str4=menuhref2.split('**') //然后分解构成二级菜单的数据<br>for(i=1;i<str3.length;i++){ //按照数组的大小循环生成单个TD<br>tdstr2=happydiv2.insertRow().insertCell() //在二级菜单中插入<Tr><Td></Td></Tr><br>tdstr2.innerHTML="<a href='"+str4[i].replace(/lshdicstr1/g,'<').replace(/lshdicstr2/g,' ').replace(/lshdicstr3/g,'>')+"'>"+str3[i]+"</a>" //设定具体显示的数据,replace将预定字符替换过来<br>}<br>cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',2000) //一切完毕后加上定时关闭菜单,可选<br>}<br>function over1(){ //一,二级菜单中MOVEOVER事件时使用本函数定义菜单效果<br>if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='eeeeee';event.srcElement.style.borderTop='1 solid';<br>event.srcElement.style.borderBottom='1 solid'}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){<br>event.srcElement.parentElement.bgColor='eeeeee';event.srcElement.parentElement.style.borderTop='1 solid';<br>event.srcElement.parentElement.style.borderBottom='1 solid'}<br>}<br>function out1(){ //一,二级菜单中MOVEOUT事件时使用本函数定义菜单效果<br>if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';event.srcElement.style.borderTop='';<br>event.srcElement.style.borderBottom=''<br>}else if(event.srcElement.tagName=="FONT"||event.srcElement.tagName=="A"){event.srcElement.parentElement.bgColor='';<br>event.srcElement.parentElement.style.borderTop='';event.srcElement.parentElement.style.borderBottom=''}<br>}<br>function click1(){ //一,二级菜单时CLICK单击事件时使用本函数转到指定网址<br>if(event.srcElement.tagName=="TD")location.href=event.srcElement.all.tags('A')(0).href<br>}<br>function over2(){ //基本的HTML导航栏在MOUSEOVER时使用本函数,设定背景,并清除定时关闭<br>if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='white';if(cleartime!=1)clearTimeout(cleartime)}<br>}<br>function out2(){ //基本的HTML导航栏在MOUSEOUT时使用本函数,设定背景,并加上定时关闭菜单的效果<br>if(event.srcElement.tagName=="TD"){event.srcElement.bgColor='';<br>cleartime=setTimeout('happydiv.style.display="none";happydiv2.style.display="none"',500)}<br>}<br>function click2(){ //基本的HTML导航栏在CLICK单击时转到的网址,目标网址使用自定义的HTML属性GOTO做目标<br>location.href=event.srcElement.goto<br>}<br>function document.onclick(){ //页面单击时关闭所有菜单<br>happydiv.style.display='none';happydiv2.style.display='none'<br>}<br></script><br><table id=happydiv style='position:absolute;z-index:5;display:none;cursor:hand;border-top:0;border-bottom:0'<br> bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white <br>onmouseover="over1();clearTimeout(cleartime)" <br>onmouseout="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)" <br>onclick=click1()><br><tr><Td></td></tr><br></table> <!--一级容器菜单显示表格结束--><br><table id=happydiv2 style='position:absolute;z-index:5;display:none;cursor:hand;border-left:0' <br>bgcolor=white cellspacing=0 border=1 rules=none bordercolorlight=black bordercolordark=white <br>onmouseover="over1();clearTimeout(cleartime)" <br>onmouseout="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)" <br>onclick=click1()><br><tr><Td></td></tr><br></table> <!--二级扩展菜单显示表格结束--><br><br><!--<br>整个程序就是这样的,乍看来乱不可言,细看来则条理清晰,非常实用,几乎没有多余代码,由于定义了函数,所以移植性和可塑性很强<br>其中数据为 - 相当于"WINDOWS菜单中的水平线"<br>-->
<p align=right style='color:gray'>蓝丽程序员论坛收录 http://www.lshdic.com</div><br>
<input type=button value='运行在浏览器查看' style='background-color:eeeeee;border:1 cccccc solid;width:120' onclick="openw(htmdiv1.innerText)"><input type=button value='快速编辑' style='background-color:eeeeee;border:1 cccccc solid;' onclick="try{htmdiv1.contentEditable=true}catch(e){alert('您的浏览器版本过低无法使用该功能')}"> <font color=aaaaaa>注意:运行在浏览器查看时请注意含有恶意程序</a>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -