对于如今热衷于网页设计的爱好者们来说，单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点HTML的知识，就可以。即使什么也不懂，照葫芦画瓢也行，呵呵。
第一步，定义下拉菜单JS代码
以下是引用片段：
＜SCRIPTlanguage=JavaScript＞
＜!--
functionMM_findObj(n,d){//v4.01
varp,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);returnx;
}
functionMM_showHideLayers(){//
vari,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＞
第二步，在适当的位置插入目录菜单
以下是引用片段：
＜TABLEborderColor=#ffffffheight=25width=150align=leftbgColor=#ccccccborder=1＞
＜TBODY＞＜TR＞
＜TD
onmouseover="MM_showHideLayers(Layer2,,hide,Layer1,,show)"
borderColorLight=#000000width=100bgColor=#ccccffheight=15＞
＜DIValign=center＞＜A
onclick="MM_showHideLayers(Layer2,,hide,Layer1,,show)"
href="2#"＞网上书店＜/A＞＜/DIV＞＜/TD＞
＜TD
onmouseover="MM_showHideLayers(Layer2,,show,Layer1,,hide)"
borderColorLight=#000000width=100bgColor=#ccccffheight=15＞
＜DIValign=center＞＜A
onclick="MM_showHideLayers(Layer2,,show,Layer1,,hide)"
href="1#"＞书盘目录＜/A＞＜/DIV＞＜/TD＞
＜/TR＞
＜/TBODY＞
＜/TABLE＞
第三步，插入隐藏层的定义.
以下是引用片段：
＜DIVid=Layer1style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:12px;WIDTH:88px;HEIGHT:163px" ＞
＜TABLEborderColor=#ffffffbgColor=#ccccffborderColorLight=#000000border=1onmouseover="MM_showHideLayers
(Layer1,,show)"onmouseout="MM_showHideLayers(Layer1,,hide)"＞
＜TBODY＞
＜TR＞
＜TDheight=15＞
＜DIValign=center＞＜Ahref="A#"＞最新图书＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TDheight=15＞
＜DIValign=center＞＜Ahref="S#"＞热点图书＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TDheight=15＞
＜DIValign=center＞＜Ahref="D#"＞隆重推出＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
＜DIVid=Layer2style="Z-INDEX:1;VISIBILITY:hidden;POSITION:absolute;TOP:42px;LEFT:85px;WIDTH:120px;HEIGHT:127px"
＞
＜TABLEborderColor=#ffffffbgColor=#ccccFFborderColorLight=#000000border=1onmouseover="MM_showHideLayers
(Layer2,,show)"onmouseout="MM_showHideLayers(Layer2,,hide)"＞
＜TBODY＞
＜TR＞
＜TDheight=15＞
＜DIValign=center＞＜A
href="F#"＞总目录＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜TR＞
＜TDheight=15＞
＜DIValign=center＞＜A
href="G#"＞图书目录＜/A＞＜/DIV＞＜/TD＞＜/TR＞
＜/TBODY＞＜/TABLE＞
＜/DIV＞
到这里，你就可以看到一个完整的下拉菜单的网页特效了。
