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部分前面也讲了。看下红色标记，这个就是在onmouseover时候通过body的js部分开始执行fadein(mytransition)

　　那么还有这个绿色的代码，这个才是真正控制菜单效果的地方，n中的7就是指第七种样式，你可以从下面看到各种样式的显示方式，按顺序从上到下依次为x、0-23共25种效果。ok!到此为止，就这些，那么我们把这些代码组合一下，不就出来了这个具有25中特效的菜单了吗～：），看最下面的整体代码。  

原文转自：http://www.ltesting.net