制作更方便的下拉菜单

由于JavaScript和VBScript脚本语言及CSS的日益流行，Interent上各大网站纷纷采用这些技术，使自己的站点变得更加活跃，更具交互性和趣味性。尤其是微软主页上的那种下拉菜单，曾经让我感到不可思议，简单的网页竟能呈现出类似应用程序般的界面，让我羡慕不已。经过研究，我发现此类菜单的编制并不复杂，下面，我就把我编制的下拉菜单介绍给大家。

　　首先，我们先要定义几个类（仔细看哟，这里可是影响外观效果的关键部位）：

 

< TEXTAREA  style ="WIDTH: 447px; HEIGHT: 186px"  rows =12  cols =60 >
< STYLE >
　　.over { background－color : #cccccc ;
　　//这里定义菜单项鼠标OVER时的效果；
　　border－top : #ffffff 1px solid ;  //上边的属性
　　border－bottom : #000000 1px solid ; //下边的属性
　　border－left : #ffffff 1px solid ;  //左边的属性
　　border－right : #000000 1px solid }  //右边的属性
　　.out { background－color : #cccccc ;
　　//这里定义菜单项一般状态；
　　border－top : #cccccc 1px solid ;
　　border－bottom : #cccccc 1px solid ;
　　border－left : #cccccc 1px solid ;
　　border－right : #cccccc 1px solid }
　　.down { background－color : #cccccc ;
　　//这里定义菜单项鼠标左键点击时的效果；
　　border－top : #000000 1px solid ;
　　border－bottom : #ffffff 1px solid ;
　　border－left : #000000 1px solid ;
　　border－right : #ffffff 1px solid }
　　.subover { background－color : #003090 ; color : #ffffff }
　　//这里定义子菜单鼠标OVER时的效果；
　　.subout { background－color : #cccccc }
　　//这里定义子菜单一般状态；
　　 </ STYLE >
　　//请把以上代码加到 < HEAD ></ HEAD > 里面。

　　定义完CSS风格，下面我们把它和HTML合并到一起：
　　 < table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0"  align ="center"  class ="over"  height ="22" >< tr >
　　 < td  width ="9%"  height ="19" >
　　 < table  id ="bar0"  //定义“文件”菜单项的ID；
　　onmousedown ="mydown(" bar0");"
　　//定义“文件”菜单项的鼠标事件；
　　onMouseOver ="myover(" bar0");"
　　onMouseOut ="myout(" bar0");"
　　onclick ="myclick(" bar0");"
　　class ="out"  //定义“文件”菜单项的类；
　　width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0"  bgcolor ="#cccccc" >< tr >< td  colspan ="2"  height ="19" >< div  align ="center" > 文件 </ div ></ td ></ tr ></ table >
　　//“文件”菜单项定义结束；
　　 </ td >
　　 < td  width ="9%"  height ="19" > //定义第二个菜单项；
　　 < table  id ="bar1"  onmousedown ="mydown(" bar1");" class ="out"
　　width ="100%"  border ="0"  cellspacing ="0"
　　cellpadding ="0"  bgcolor ="#cccccc"
　　onMouseOver ="myover(" bar1");"
　　onMouseOut ="myout(" bar1");"
　　onclick ="myclick(" bar1");" >
　　 < tr >< td  colspan ="2"  height ="19" >< div  align ="center" > 编辑 </ div ></ td ></ tr >
　　 </ table >  //第二个菜单项定义结束；
　　 </ td >  //定义第N个菜单项，方法同上；
　　 </ tr >
　　 </ table >

　　下面是子菜单的定义；
　　 < div  id ="menu0"  //定义子菜单1的位置并隐藏；
　　style ="POSITION: absolute;LEFT: 6px; TOP: 22px; Z－INDEX: 12; 
　　width: 100px; height: 50px;display:none" >
　　 < table  class ="over"  width ="100%"  border ="0" >< tr >
　　 < td  id ="00"  onmouseover ="myover(" 00");"
　　onmouseout ="myout(" 00");"
　　onclick ="myclick(" 想打开的文件0.htm");" >  菜单项00 </ td >
　　 </ tr >< tr >
　　 < td  id ="01"  onmouseover ="myover(" 01");"
　　onmouseout ="myout(" 01");"
　　onclick ="myclick(" 想打开的文件1.htm');" >  菜单项01 </ td >
　　 </ tr ></ table >
　　 </ div >
　　 < div  id ="menu1"  //定义子菜单2的位置并隐藏；
　　style ="POSITION: absolute;LEFT: 66px; TOP: 22px; Z－INDEX: 12;
　　width: 100px; height: 50px;display:none" >  
　　 < table  class ="over"  width ="100%"  border ="0" >< tr >
　　 < td  id ="10"  onmouseover ="myover(" 10");"
　　onmouseout ="myout(" 10");"
　　onclick ="myclick(" 想打开的文件2.htm");" >  菜单项10 </ td >
　　 </ tr >< tr >
　　 < td  id ="11"  onmouseover ="myover(" 11");"
　　onmouseout ="myout(" 11");"
　　onclick ="myclick(" 想打开的文件3.htm");" >  菜单项11 </ td >
　　 </ tr >
　　 </ table >
　　 </ div >

　　哇！HTML代码也编写完了，把它们添加到你的 < BODY ></ BODY > 中吧，现在，我们将进行代码的核心部分：
　　“脚本”的编制！
　　 < SCRIPT >
　　 function  myover(tt)
　　 // 菜单项及子菜单的鼠标OVER例程；
　　{ cc = document.all(tt);
　　 if ( ! tt.indexOf( " bar " ))
　　{ cc.className = " over " ;
　　}
　　 else {cc.className = " subover " ;}
　　event.srcElement.style.cursor  =   " default " ;
　　}
　　 function  myout(tt){
　　 // 菜单项及子菜单的鼠标OUT例程；
　　cc = document.all(tt);
　　 if (tt.indexOf( " bar " ) == " 0 " )
　　{ cc.className = " out " ;
　　}
　　 else {cc.className = " subout " ;}
　　event.srcElement.style.cursor  =   " auto " ;
　　}
　　 function  mydown(tt){  // 菜单项的鼠标DOWN例程；
　　cc = document.all(tt);
　　cc.className = " down " ;
　　}
　　 function  myclick(tt) 
　　 // 菜单项及子菜单的鼠标CLICK例程；
　　{  if (tt.indexOf( " bar " ) == " 0 " )
　　{ hideall();
　　 var  src = document.all(tt);
　　 if (src.id == " bar0 " ) menu0.style.display = "   " ;
　　 else   if (src.id == " bar1 " )
　　menu1.style.display = "" ;
　　 else   if (src.id == " bar2 " )
　　menu2.style.display = "   " ;
　　 else   if (src.id == " bar3 " )
　　menu3.style.display = "   " ;
　　}
　　 else {location.href = tt;}
　　window.event.cancelBubble = true ;
　　 // 终结本事件冒泡
　　}
　　 function  hideall()
　　{
　　menu0.style.display = " none " ;
　　menu1.style.display = " none " ;
　　menu2.style.display = " none " ;
　　menu3.style.display = " none " ;
　　}
　　 function  renclick(){
　　hideall();  // 隐藏所有菜单
　　}
　　document.onmouseup = renclick;
　　 </ SCRIPT >
　　把上面的脚本添加到你的页面的 < HEAD ></ HEAD > 中。


</ TEXTAREA >