你正在查看: 首页 > 技术文章>html > 25种风格各异的菜单

25种风格各异的菜单

菜单

请看下面的菜单样式。因为样式比较多,所以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="http://egadesk.com">ENIGMA DESK For icon</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For skin</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For image</a></TD></TR><TR><TD width=100% align=middle class=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 ><a href="http://egadesk.com">ENIGMA DESK For icon</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For skin</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For image</a></TD></TR><TR><TD width=100% align=middle class=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>

  注意到蓝色的部分了吗?那就是要显示在进行特效的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>

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

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

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

<span style="CURSOR: 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="http://egadesk.com">ENIGMA DESK For icon</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For skin</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For image</a></TD></TR><TR><TD width=100% align=middle class=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 ><a href="http://egadesk.com">ENIGMA DESK For icon</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For skin</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">ENIGMA DESK For image</a></TD></TR><TR><TD width=100% align=middle class=td ><a href="http://egadesk.com">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 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%">
<TR>
<TD valign=top height=150 width="100%" class=td3>
<span style="CURSOR: hand;" >
<small n="x">MEUN1</small></span>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


如何?就这点代码,造就这么多种菜单!



客服 反馈