25种风格各异的菜单

80酷酷网    80kuku.com

　　菜单

请看下面的菜单样式。因为样式比较多，所以8个按钮共用一个菜单DIV ID

MEUN1    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 image
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后，
移向菜单时候层就消失了。其实，动下脑筋，给div的属性中加入

 

　　就可以从控制菜单的文字或图片移向菜单选择了。 
　　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动作：

　　记住哦，要事先给TD连个Class：class=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=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 ＞＜a href=""＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞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 ＞＜a href=""＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞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＞ 

　　注意到蓝色的部分了吗？那就是要显示在进行特效的div中的内容，但这不是div，关于这段js的解释，很简单，我不说了：P。下面看一下div：

＜div id=mytransition left:43px; top:169px; width:400px; height:100px; z-index:1; visibility: hidden;FILTER: revealTrans(duration=3,transition=0) blendTrans(duration=3);" ＞＜/div＞

   　看到了吧，蓝色的部分就是第一步中说的效果，可以让鼠标从控制菜单上移向菜单，而不是离开控制体而隐藏了菜单。

　　红的部分很重要，它设定了默认的变化方式。

　　那么我们在看控制这个菜单的文字或者图片：

＜span hand;" ＞
   ＜small n="7"＞MEUN1＜/small＞＜/span＞

　　关于show hide layer部分前面也讲了。看下红色标记，这个就是在onmouseover时候通过body的js部分开始执行fadein(mytransition)

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

　　Step4:

Choose Transition
Blend in
Box in
Box out
Circle in
Circle out 
Wipe up 
Wipe down 
Wipe right 
Wipe left
Vertical blinds 
Horizontal blinds
Checkerboard across
Checkerboard down
Random dissolve
Split vertical in 
Split vertical out
Split horizontal in
Split horizontal out
Strips 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"＞
＜HTML＞
＜HEAD＞
＜TITLE＞ caience Design ＜/TITLE＞
＜META HTTP-EQUIV="Content-Type" CONTENT="text/html;" CHARSET="gb2312"＞
＜META NAME="Generator" CONTENT="EditPlus"＞
＜META NAME="Author" CONTENT="caience.love"＞
＜META NAME="Keywords" CONTENT=""＞
＜META NAME="Description" CONTENT=""＞
＜STYLE type="text/css"＞
.td{border:1px solid #FFFFCC}
.td2{border:1px solid #000000;background-color:#FFFFFF}
＜/style＞
＜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 ＞＜a href=""＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞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 ＞＜a href=""＞ENIGMA DESK For icon＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For skin＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK For image＜/a＞＜/TD＞＜/TR＞＜TR＞＜TD width=100% align=middle class=td ＞＜a href=""＞ENIGMA DESK Basic BBS＜/a＞＜/TD＞＜/TR＞＜/TABLE＞'
mytransition.filters.blendTrans.play()
}
}
 
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))＞0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i＜d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i＜d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
 
function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i＜(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
 
//--＞
＜/script＞
＜/HEAD＞
 
＜BODY＞
＜script language=javascript1.2＞
＜!--
 
function doit(mytransition){
if (event.srcElement.tagName=="SMALL"){
cur=event.srcElement.n
fadein(mytransition)
}
}
 
//--＞
＜/script＞
＜div id=mytransition 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%"＞
 ＜TR＞
  ＜TD valign=top height=150 width="100%" class=td3＞
   ＜span hand;" ＞
   ＜small n="x"＞MEUN1＜/small＞＜/span＞
  ＜/TD＞
 ＜/TR＞
＜/TABLE＞
＜/BODY＞
＜/HTML＞


如何？就这点代码，造就这么多种菜单！



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇显示你个性的鼠标指针

下一篇为主页添加一个漂亮的按钮（上）

相关文章

点击：