25种风格各异的菜单.doc

1、 25 种风格各异的菜单请看下面的菜单样式。因为样式比较多，所以 8 个按钮共用一个菜单 DIV IDMEUN1 MEUN2 MEUN3 MEUN4 MEUN5 MEUN6 MEUN7 MEUN8 ENIGMA DESK For icon ENIGMA DESK For skin ENIGMA DESK For image ENIGMA DESK Basic BBS MEUN9 MEUN10 MEUN12 MEUN13 MEUN14 MEUN15 MEUN16 MEUN17 ENIGMA DESK For icon ENIGMA DESK For skin ENIGMA DESK For im

2、age ENIGMA DESK Basic BBS MEUN18 MEUN19 MEUN20 MEUN21 MEUN22 MEUN23 MEUN24 MEUN25 ENIGMA DESK For icon ENIGMA DESK For skin ENIGMA DESK For image ENIGMA DESK Basic BBS Step1: 首先我们了解一下，onmouse show and hide layer，这个是典型的 DW 带的功能，相信大家都能做的出来。做好后，控制菜单的文字或者图片中有些属性： 关键是当我们的鼠标移动到控制菜单的文字 show and hide layer

3、后，移向菜单时候层就消失了。其实，动下脑筋，给 div 的属性中加入 就可以从控制菜单的文字或图片移向菜单选择了。 Step2: 现在看一下，onmouse over 后改变菜单中的 CSS，其实这个也非常简单，但不是用 DW 直接能做到的（起码我不知道：P ）：先定义两个不同的 CSSSTYLE type=“text/css“.tdborder:1px solid #000000.td2border:1px solid #336699;background-color:#FFFFFF/style 然后给表格中的 TD 添加 onmouse 动作： 记住哦，要事先给 TD 连个Class：cl

4、ass=td做好了就是这样：TD width=100% align=middle class=td 以上都是 html 和 CSS 的基础。 效果：Step3: 下面就是重要的部分了看一下 head 区该用到的 js：script language=“javascript“function fadein(mytransition)mytransition.innerHTML=if (cur!=x)mytransition.filters.revealTrans.Transition=curmytransition.filters.revealTrans.apply()mytransition.

5、innerHTML=TABLE height=100 border=1 bordercolor=#336699 bgcolor=#FFFFCC cellPadding=0 cellSpacing=3 width=100%TR TD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For icon/a/TD/TRTR TD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For skin/a/TD/TR TRTD width=100% align=mid

6、dle class=td a href=“http:/“ENIGMA DESK For image/a/TD/TRTRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK Basic BBS/a/TD/TR/TABLE mytransition.filters.revealTrans.play()elsemytransition.filters.blendTrans.apply()mytransition.innerHTML=TABLE height=100 border=1 bordercolor=#336699 bgc

7、olor=#FFFFCC cellPadding=0 cellSpacing=3 width=100%TR TD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For icon/a/TD/TRTR TD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For skin/a/TD/TR TRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For image/a/TD/TRTR

8、TD width=100% align=middle class=td a href=“http:/“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.nfadein(mytransition)/-/script 注意到蓝色的部分了

9、吗？那就是要显示在进行特效的 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);“ /div 看到了吧，蓝色的部分就是第一步中说的效果，可以让鼠标从控制菜单上移

10、向菜单，而不是离开控制体而隐藏了菜单。 红的部分很重要，它设定了默认的变化方式。 那么我们在看控制这个菜单的文字或者图片：span style=“CURSOR: hand;“ small n=“7“ MEUN1 /small/span 关于 show hide layer 部分前面也讲了。看下红色标记，这个就是在 onmouseover 时候通过 body 的 js 部分开始执行 fadein(mytransition) 那么还有这个绿色的代码，这个才是真正控制菜单效果的地方，n 中的 7 就是指第七种样式，你可以从下面看到各种样式的显示方式，按顺序从上到下依次为 x、0-23 共 25 种效

11、果。ok!到此为止，就这些，那么我们把这些代码组合一下，不就出来了这个具有 25 中特效的菜单了吗：） ，看最下面的整体代码。 Step4:Choose Transition Blend inBox in Box out Circle in Circle out Wipe up Wipe down Wipe right Wipe left Vertical blinds Horizontal blinds Checkerboard acrossCheckerboard down Random dissolve Split vertical in Split vertical outSplit

12、horizontal in Split horizontal outStrips left down Strips left up Strips right down Strips right up Random bars horizontal Random bars vertical Random !DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.0 Transitional/EN“HTMLHEAD TITLE caience Design /TITLEMETA HTTP-EQUIV=“Content-Type“ CONTENT=“text/html;“ CHAR

13、SET=“gb2312“META NAME=“Generator“ CONTENT=“EditPlus“META NAME=“Author“ CONTENT=“caience.love“META NAME=“Keywords“ CONTENT=“META NAME=“Description“ CONTENT=“STYLE type=“text/css“.tdborder:1px solid #FFFFCC.td2border:1px solid #000000;background-color:#FFFFFF/stylescript language=“javascript“!-functio

14、n fadein(mytransition)mytransition.innerHTML=if (cur!=x)mytransition.filters.revealTrans.Transition=curmytransition.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 clas

15、s=td a href=“http:/“ENIGMA DESK For icon/a/TD/TRTR TD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For skin/a/TD/TR TRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For image/a/TD/TRTRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK Basic BBS/a/TD/TR/TABL

16、E mytransition.filters.revealTrans.play()elsemytransition.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 a href=“http:/“ENIGMA DESK For icon/a/TD/TRTR TD width

17、=100% align=middle class=td a href=“http:/“ENIGMA DESK For skin/a/TD/TR TRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK For image/a/TD/TRTRTD width=100% align=middle class=td a href=“http:/“ENIGMA DESK Basic BBS/a/TD/TR/TABLE mytransition.filters.blendTrans.play()function MM_findObj

18、(n, d) /v4.0var p,i,x; if(!d) d=document; if(p=n.indexOf(“?“)0 n=n.substring(0,p);if(!(x=dn) for (i=0;!xi+) x=d.formsin;for(i=0;!xi+) x=MM_findObj(n,d.layersi.document);if(!x return x;function MM_showHideLayers() /v3.0var i,p,v,obj,args=MM_showHideLayers.arguments;for (i=0; i(args.length-2); i+=3) i

19、f (obj=MM_findObj(argsi)!=null) v=argsi+2;if (obj.style) obj=obj.style; v=(v=show)?visible:(v=hide)?hidden:v; obj.visibility=v; /-/script /HEADBODYscript language=javascript1.2!-function doit(mytransition)if (event.srcElement.tagName=“SMALL“)cur=event.srcElement.nfadein(mytransition)/-/script div id

20、=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);“ /div TABLE border=1 bordercolor=#000000 cellPadding=0 cellSpacing=10 width=“100%“ TRTD valign=top height=150 width=“100%“ class=td3span style=“CURSOR: hand;“ small n=“x“ MEUN1 /small/span/TD/TR/TABLE/BODY/HTML如何？就这点代码，造就这么多种菜单！