资料库 ☆ 华陌网

完整版 » CSS 25种风格各异的菜单



2001-06-22? ?caience.love??经典论坛
请看下面的菜单样式。因为样式比较多,所以8个按钮共用一个菜单DIV ID

MEUN1    MEUN2    MEUN3    MEUN4    MEUN5    MEUN6    MEUN7    MEUN8 
MEUN9    MEUN10    MEUN12    MEUN13    MEUN14    MEUN15    MEUN16    MEUN17
MEUN18    MEUN19    MEUN20    MEUN21    MEUN22    MEUN23    MEUN24    MEUN25
  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>

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

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

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

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

<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中特效的菜单了吗~:),看最下面的整体代码。

  Step4:

<!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 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()
}
}
 
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);" onMouseOver="MM_showHideLayers('mytransition','','show');" onMouseOut="MM_showHideLayers('mytransition','','hide');"></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;" onMouseOver="MM_showHideLayers('mytransition','','show');doit(mytransition);" onMouseOut="MM_showHideLayers('mytransition','','hide');">
   <small n="x">MEUN1</small></span>
  </TD>
 </TR>
</TABLE>
</BODY>
</HTML>


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


Powered by flymote.com 华陌网   © 华陌 * archiver * SE *