25种风格各异的菜单

日期：2007年6月6日作者：查看:[大字体中字体小字体]

请看下面的菜单样式。因为样式比较多，所以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带的功能，相信大家都能做的出来。做好后，控制菜单的文字或者图片中有些属性：

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.revealT
（出处：网侠）
25种风格各异的菜单相关文章：
·25种风格各异的菜单
25种风格各异的菜单相关软件

上一篇:轻松玩转花样表单常用技巧

下一篇:CSS 制作的三级菜单特效代码

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

25种风格各异的菜单

精品推荐

热点TOP10

特别推荐