HTML教程CSS教程 DHTML教程 Dreamweaver FrontPages Javascript 正则表达式专题
返回首页

25种风格各异的菜单

时间:2010-06-28 08:45来源: 作者:编程狂 点击:
Step1: 首先我们了解一下,Onmouse show and hide layer,这个是典型的DW带的功能,相信大家都能做的出来。做好后,控制菜单的文字或者图片中有些属性: onMouseOver=MM_showHideLayers('meun2','','sh

 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');"
lyttzx.com
  就可以从控制菜单的文字或图片移向菜单选择了。
  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'"
lyttzx.com

  记住哦,要事先给TD连个Class:class=td
做好了就是这样:

<TD width=100% align=middle class=td onMouseover="this.className='td2';" onMouseout="this.className='td'">

  以上都是HTML和CSS的基础。
效果:
?
?
?
lyttzx.com



  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>'

copyright lyttzx.com


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');"> lyttzx.com
?? <small n="x">MEUN1</small></span>
? </TD>
?</TR>
</TABLE>
</BODY>
</HTML>


如何?就这点代码,造就这么多种菜单!
本文来自泠云天天在线

(责任编辑:泠云)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名:密码: 验证码:点击我更换图片
发布者资料
编程狂 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2009-10-07 08:10 最后登录:2010-09-08 15:09