经典的导航二级式导航菜单增强版
作者：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
οnmοuseοver=over2() οnmοuseοut=out2() οnclick=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' οnmοuseοver="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 οnmοuseοver="movese('FlashMtv 經典音樂|MTV專集 經典電影','happy.asp|happy2.asp')" goto='happy.asp'>娛樂視聽</a>
</td>
<!--這個菜單使用了二級菜單,稍微較長,請自行修改-->
<Td class=menu
οnmοuseοver="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<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 οnmοuseοver="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 οnmοuseοver="movese('進入網頁編輯中心|下載編輯網頁v2版','editweb.asp|download2.asp?id=48')"
goto='editweb.asp'>編輯網頁
</td>
<Td class=menu οnmοuseοver="movese('進入程序編輯中心|下載編寫程序v2版','editdhtml.asp|download2.asp?id=92',1000)"
goto='editdhtml.asp'>編寫程序
</td>
<Td class=menu align=center title='進行注冊,領取Lshdic200X軟件序列號的地方' style='font-size:13px'
οnmοuseοver="movese('查看領取Lshdic序列號|注冊購買Lshdic序列號|注冊購買流程簡介','lshdic2002.asp|lshdic2002one.asp|lshdic2002help1.asp')" goto='lshdic2002.asp'>Lshdic
</td>
<Td class=menu οnmοuseοver="movese('查看客戶所有留言|簽寫新留言','bbs2.asp|bbs2fatie.asp')" goto='bbs2.asp'>留言我們
</td>
<Td class=menu
οnmοuseοver="movese('網 友 軟 件|網 友 網 站|網 友 文 章|網 友 簡 歷|-|網 友 發 布 平 臺','friendsoft.asp|friendweb.asp|friendword.asp|friendabout.asp||friendftp.asp',1000)"
goto='friendall.asp'>網友中心
</td>
<Td class=menu align=center
οnmοuseοver="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 οnmοuseοver=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
οnmοuseοver="over1();clearTimeout(cleartime)"
οnmοuseοut="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)"
οnclick=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
οnmοuseοver="over1();clearTimeout(cleartime)"
οnmοuseοut="out1();temp1='none';cleartime=setTimeout('happydiv.style.display=temp1;happydiv2.style.display=temp1',500)"
οnclick=click1()>
<tr><Td></td></tr>
</table>??? <!--二級擴展菜單顯示表格結束-->
<!--
整個程序就是這樣的,乍看來亂不可言,細看來則條理清晰,非常實用,幾乎沒有多余代碼,由于定義了函數,所以移植性和可塑性很強
其中數據為 - 相當于"WINDOWS菜單中的水平線"
-->
總結
以上是生活随笔為你收集整理的经典的导航二级式导航菜单增强版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在做会员资料修改时,实现下拉菜单的默认项
- 下一篇： 使用 Vml 制作立体柱状投票统计图的完