|
由于javascript和VBScript脚本语言及CSS的日益流行，Interent上各大网站纷纷采用这些技术，使自己的站点变得更加活跃，更具交互性和趣味性。尤其是微软主页上的那种下拉菜单，曾经让我感到不可思议，简单的网页竟能呈现出类似应用程序般的界面，让我羡慕不已。经过研究，我发现此类菜单的编制并不复杂，下面，我就把我编制的下拉菜单介绍给大家。
首先，我们先要定义几个类（仔细看哟，这里可是影响外观效果的关键部位）：
<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>中。
好了！大功告成！现在，试着运行你的新页面，看看怎么样？是不是比微软站的那个还COOL？哈！
|
本类阅读TOP10