下拉菜单的简单制作

对于如今热衷于网页设计的爱好者们来说，单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点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(){//v6.0 
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＞

到这里，你就可以看到一个完整的下拉菜单的网页特效了。

搜索

下拉菜单的简单制作