制作更方便的下拉菜单

最新推荐文章于 2026-06-19 07:42:08 发布

转载最新推荐文章于 2026-06-19 07:42:08 发布 · 859 阅读

标签

#border #menu #table #function #div

Dreamweave技术专栏收录该内容

6 篇文章

订阅专栏

由于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>