IDC资讯中心
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中特效的菜单了吗～：），看最下面的整体代码。
