对于如今热衷于网页设计的爱好者们来说,单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点HTML的知识,就可以。即使什么也不懂,照葫芦画瓢也行,呵呵。 第一步,定义下拉菜单JS代码 <SCRIPT language=JavaScript> <!-- function MM_findObj(n, d) { //v4.01 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 && d.getElementById) x=d.getElementById(n); return x; } function MM_showHideLayers() { //v6.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> 第二步,在适当的位置插入目录菜单 <TABLE borderColor=#ffffff height=25 width=150 align=left bgColor=#cccccc border=1 > <TBODY> <TR> <TD onmouseover="MM_showHideLayers(Layer2,,hide,Layer1,,show)" borderColorLight=#000000 width=100 bgColor=#ccccff height=15> <DIV align=center><A onclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)" href="2#">网上书店</A></DIV></TD> <TD onmouseover="MM_showHideLayers(Layer2,,show,Layer1,,hide)" borderColorLight=#000000 width=100 bgColor=#ccccff height=15> <DIV align=center><A onclick="MM_showHideLayers(Layer2,,show,Layer1,,hide)" href="1#">书盘目录</A></DIV></TD> </TR> </TBODY> </TABLE> 第三步,插入隐藏层的定义. <DIV id=Layer1 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 12px; WIDTH: 88px; HEIGHT: 163px" > <TABLE borderColor=#ffffff bgColor=#ccccff borderColorLight=#000000 border=1 onmouseover="MM_showHideLayers (Layer1,,show)" onmouseout="MM_showHideLayers(Layer1,,hide)"> <TBODY> 情缘.教程_网 [http://Www.XiuGoo.Com] <TR> <TD height=15> <DIV align=center><A href="A#">最新图书</A></DIV></TD></TR> <TR> <TD height=15> <DIV align=center><A href="S#">热点图书</A></DIV></TD></TR> <TR> <TD height=15> <DIV align=center><A href="D#">隆重推出</A></DIV></TD></TR> </TBODY></TABLE> </DIV> <DIV id=Layer2 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 85px; WIDTH: 120px; HEIGHT: 127px" > <TABLE borderColor=#ffffff bgColor=#ccccFF borderColorLight=#000000 border=1 onmouseover="MM_showHideLayers (Layer2,,show)" onmouseout="MM_showHideLayers(Layer2,,hide)"> <TBODY> <TR> <TD height=15> <DIV align=center><A href="F#">总目录</A></DIV></TD></TR> <TR> <TD height=15> <DIV align=center><A href="G#">图书目录</A></DIV></TD></TR> </TBODY></TABLE> </DIV> 到这里,你就可以看到一个完整的下拉菜单的网页特效了。 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-29 17:23 , Processed in 0.213359 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.