下拉菜单的制作

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

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