|
|
|
25种风格各异的菜单 (1)
作者:佚名 来源:一亩三分地 点击: 日期:2007-03-22 |
|
25种风格各异的菜单 (转 1)
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＞
注意到mytransition.innerHTML的部分了吗？那就是要显示在进行特效的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＞
看到了吧，id=mytransition 和mytransition的部分就是第一步中说的效果，可以让鼠标从控制菜单上移向菜单，而不是离开控制体而隐藏了菜单。
FILTER: revealTrans(duration=3,transition=0) blendTrans(duration=3);的部分很重要，它设定了默认的变化方式。
那么我们在看控制这个菜单的文字或者图片：
＜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中特效的菜单了吗～：），看最下面的整体代码。
|
|
|
|
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【论坛讨论】 |
 相关文章: |
|
|
文章评论:(条) |
|
|
|
|
责任编辑:一分 声明：刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。 |
|
设为主页
收藏本站
