經典的導航二級式導航選單增強版
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
作者：lshdic http://blog.csdn.net/lshdic/
<!--
呵呵我發的上一版相信大家都看過了吧，想一想上一版的確是不怎麼華麗，而且上一版是針對表格內的連線A而定位的
而這一版的優點顯然比上一版要華麗，速度一樣快，而且是針對表格TD來定位的，TIMEOUT設定的也必要合理
以下程式碼完整範例請登陸
-->
<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<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選單中的水平線"
-->
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
