|
25種風(fēng)格各異的菜單 (轉(zhuǎn) 1)
Step1:
首先我們了解一下，Onmouse show and hide layer，這個是典型的DW帶的功能，相信大家都能做的出來。做好后，控制菜單的文字或者圖片中有些屬性：
onMouseOver="MM_showHideLayers('meun2','','show');" onMouseOut="MM_showHideLayers('meun2','','hide');"
關(guān)鍵是當(dāng)我們的鼠標(biāo)移動到控制菜單的文字show and hide layer后，
移向菜單時候?qū)泳拖Я恕Ｆ鋵崳瑒酉履X筋，給div的屬性中加入
onMouseOver="MM_showHideLayers('meun2','','show');" onMouseOut="MM_showHideLayers('meun2','','hide');"
就可以從控制菜單的文字或圖片移向菜單選擇了。
Step2:
現(xiàn)在看一下，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的基礎(chǔ)。
Step3:
下面就是重要的部分了看一下head區(qū)該用到的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區(qū)的js：
＜script language=JavaScript1.2＞
＜!--
function doit(mytransition){
if (event.srcElement.tagName=="SMALL"){
cur=event.srcElement.n
fadein(mytransition)
}
}
//--＞
＜/script＞
注意到mytransition.innerHTML的部分了嗎？那就是要顯示在進行特效的div中的內(nèi)容，但這不是div，關(guān)于這段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的部分就是第一步中說的效果，可以讓鼠標(biāo)從控制菜單上移向菜單，而不是離開控制體而隱藏了菜單。
FILTER: revealTrans(duration=3,transition=0) blendTrans(duration=3);的部分很重要，它設(shè)定了默認的變化方式。
那么我們在看控制這個菜單的文字或者圖片：
＜span style="CURSOR: hand;" onMouseOver="MM_showHideLayers('mytransition','','show');doit(mytransition);" onMouseOut="MM_showHideLayers('mytransition','','hide');"＞
＜small n="7"＞MEUN1＜/small＞＜/span＞
關(guān)于show hide layer部分前面也講了。看下紅色標(biāo)記，這個就是在onmouseover時候通過body的js部分開始執(zhí)行fadein(mytransition)
那么還有這個綠色的代碼，這個才是真正控制菜單效果的地方，n中的7就是指第七種樣式，你可以從下面看到各種樣式的顯示方式，按順序從上到下依次為x、0-23共25種效果。ok!到此為止，就這些，那么我們把這些代碼組合一下，不就出來了這個具有25中特效的菜單了嗎～：），看最下面的整體代碼。
|
