25種風格各異的菜單 (1)

領測軟件測試網                   25種風格各異的菜單 (轉 1)


    Step1:

　　首先我們了解一下，Onmouse show and hide layer，這個是典型的DW帶的功能，相信大家都能做的出來。做好后，控制菜單的文字或者圖片中有些屬性：

onMouseOver="MM_showHideLayers(@#meun2@#,@#@#,@#show@#);" onMouseOut="MM_showHideLayers(@#meun2@#,@#@#,@#hide@#);"  

　　關鍵是當我們的鼠標移動到控制菜單的文字show and hide layer后，
移向菜單時候層就消失了。其實，動下腦筋，給div的屬性中加入

onMouseOver="MM_showHideLayers(@#meun2@#,@#@#,@#show@#);" onMouseOut="MM_showHideLayers(@#meun2@#,@#@#,@#hide@#);"  

　　就可以從控制菜單的文字或圖片移向菜單選擇了。  
　　Step2:

　　現在看一下，Onmouse over后改變菜單中的CSS，其實這個也非常簡單，但不是用DW直接能做到的（起碼我不知道：P ）：
先定義兩個不同的CSS
＜STYLE type="text/css"＞
.td{border:1px solid #000000}
.td2{border:1px solid #336699;background-color:#FFFFFF}
＜/style＞

　　然后給表格中的TD添加Onmouse動作：

onMouseover="this.className=@#td2@#;" onMouseout="this.className=@#td@#"

　　記住哦，要事先給TD連個Class：class=td
做好了就是這樣：

＜TD width=100% align=middle class=td onMouseover="this.className=@#td2@#;" onMouseout="this.className=@#td@#"＞

　　以上都是html和CSS的基礎。  

　　Step3:

　　下面就是重要的部分了看一下head區該用到的js：

＜script language="JavaScript"＞

function fadein(mytransition){
mytransition.innerHTML=@#@#
if (cur!=@#x@#){
mytransition.filters.revealTrans.Transition=cur
mytransition.filters.revealTrans.apply()
mytransition.innerHTML=@#＜TABLE height=100 border=1 bordercolor=#336699 bgcolor=#FFFFCC cellPadding=0 cellSpacing=3 width=100%＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK Basic BBS＜/a＞＜/TD＞＜/TR＞＜/TABLE＞@#
mytransition.filters.revealTrans.play()
}
else{
mytransition.filters.blendTrans.apply()
mytransition.innerHTML=@#＜TABLE height=100 border=1 bordercolor=#336699 bgcolor=#FFFFCC cellPadding=0 cellSpacing=3 width=100%＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td onMouseover="this.className=\@#td2\@#;" onMouseout="this.className=\@#td\@#"＞＜a href="http://egadesk.com"＞ENIGMA DESK Basic BBS＜/a＞＜/TD＞＜/TR＞＜/TABLE＞@#
mytransition.filters.blendTrans.play()
}
}
＜/script＞

body區的js：


＜script language=JavaScript1.2＞
＜!--

function doit(mytransition){
if (event.srcElement.tagName=="SMALL"){
cur=event.srcElement.n
fadein(mytransition)
}
}

//--＞
＜/script＞  

　　注意到mytransition.innerHTML的部分了嗎？那就是要顯示在進行特效的div中的內容，但這不是div，關于這段js的解釋，很簡單，我不說了：P。下面看一下div：

＜div id=mytransition style="position:absolute; left:43px; top:169px; width:400px; height:100px; z-index:1; visibility: hidden;FILTER: revealTrans(duration=3,transition=0) blendTrans(duration=3);" onMouseOver="MM_showHideLayers(@#mytransition@#,@#@#,@#show@#);" onMouseOut="MM_showHideLayers(@#mytransition@#,@#@#,@#hide@#);"＞＜/div＞



　　看到了吧，id=mytransition 和mytransition的部分就是第一步中說的效果，可以讓鼠標從控制菜單上移向菜單，而不是離開控制體而隱藏了菜單。

　　FILTER: revealTrans(duration=3,transition=0) blendTrans(duration=3);的部分很重要，它設定了默認的變化方式。

　　那么我們在看控制這個菜單的文字或者圖片：

＜span style="CURSOR: hand;" onMouseOver="MM_showHideLayers(@#mytransition@#,@#@#,@#show@#);doit(mytransition);" onMouseOut="MM_showHideLayers(@#mytransition@#,@#@#,@#hide@#);"＞
   ＜small n="7"＞MEUN1＜/small＞＜/span＞

　　關于show hide layer部分前面也講了�？聪录t色標記，這個就是在onmouseover時候通過body的js部分開始執行fadein(mytransition)

　　那么還有這個綠色的代碼，這個才是真正控制菜單效果的地方，n中的7就是指第七種樣式，你可以從下面看到各種樣式的顯示方式，按順序從上到下依次為x、0-23共25種效果。ok!到此為止，就這些，那么我們把這些代碼組合一下，不就出來了這個具有25中特效的菜單了嗎～：），看最下面的整體代碼。  

文章來源于領測軟件測試網 http://www.kjueaiud.com/