web上用javascript实现的各种菜单
在web上出现的菜单,常见的的无非两种,一则,如win菜单,鼠标移动上去或者单击时候弹出, 二则。如资源管理器中的树目录结构 ,具体效果如下显示:
<script language="javascript" type="text/javascript"> &amp;amp;amp;lt;!-- //初始化层管理器 var layouts = new Array(); layouts.push("item1"); layouts.push("item2"); layouts.push("item3"); layouts.push("item4"); layouts.push("item5"); layouts.push("item6"); //层处理函数 function out_layout(divname) { for(var i = 0; i &amp;amp;amp;lt; layouts.length; ++i) if(document.getElementById(layouts[i])) document.getElementById(layouts[i]).style.display='none'; document.getElementById(divname).style.display = "block"; } //事件处理函数 function mouse_over(divname) { //document.getElementById(meum).style.backgroud-color = BLUE; if(document.getElementById(divname).style.display == "none") out_layout(divname); } function mouse_out(divname) { document.getElementById(divname).style.display = "none"; } function open(divname) { if(document.getElementById(divname).style.display != "none") document.getElementById(divname).style.display = "none"; else out_layout(divname); } --&amp;amp;amp;gt; </script>
其主要源码如下:
<!--StartFragment--><table width="100%">
<caption>win式菜单</caption>
<tr>
<th id="Th1" οnmοuseοver="javascript:mouse_over('item1')">
菜单1
</th>
<th id="Th2"οnmοuseοver="javascript:mouse_over('item2')">
菜单2
</th>
<th id="Th3" οnmοuseοver="javascript:mouse_over('item3')">
菜单2
</th>
</tr>
<tr>
<td align="center" οnmοuseοut="javascript:mouse_out('item1')">
<div id="Div1" style="display:none">
<table>
<tr><th>项1</th></tr>
<tr><th>项2</th></tr>
<tr><th>项3</th></tr>
</table>
</div>
</td>
<td align="center" οnmοuseοut="javascript:mouse_out('item2')">
<div id="Div2" style="display:none">
<table>
<tr><th>项1</th></tr>
<tr><th>项2</th></tr>
<tr><th>项3</th></tr>
</table>
</div>
</td>
<td align="center" οnmοuseοut="javascript:mouse_out('item3')">
<div id="Div3" style="display:none">
<table>
<tr><th>项1</th></tr>
<tr><th>项2</th></tr>
<tr><th>项3</th></tr>
</table>
</div>
</td>
</tr>
</table>
<hr />
<table width="100%">
<caption>树结构菜单</caption>
<tr>
<td>
<a href="javascript:open('item4')">菜单1</a>
<div id="Div4" style="display:none">
<table>
<tr><td>|-项1</td></tr>
<tr><td>|-项2</td></tr>
<tr><td>|-项3</td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:open('item5')">菜单2</a>
<div id="Div5" style="display:none">
<table>
<tr><td>|-项1</td></tr>
<tr><td>|-项2</td></tr>
<tr><td>|-项3</td></tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:open('item6')">菜单3</a>
<div id="Div6" style="display:none">
<table>
<tr><td>|-项1</td></tr>
<tr><td>|-项2</td></tr>
<tr><td>|-项3</td></tr>
</table>
</div>
</td>
</tr>
</table>
<hr />
<script language="javascript" type="text/javascript">
<!--
//初始化层管理器
var layouts = new Array();
layouts.push("item1");
layouts.push("item2");
layouts.push("item3");
layouts.push("item4");
layouts.push("item5");
layouts.push("item6");
//层处理函数
function out_layout(divname)
{
for(var i = 0; i < layouts.length; ++i)
if(document.getElementById(layouts[i]))
document.getElementById(layouts[i]).style.display='none';
document.getElementById(divname).style.display = "block";
}
//事件处理函数
function mouse_over(divname)
{
//document.getElementById(meum).style.backgroud-color = BLUE;
if(document.getElementById(divname).style.display == "none")
out_layout(divname);
}
function mouse_out(divname)
{
document.getElementById(divname).style.display = "none";
}
function open(divname)
{
if(document.getElementById(divname).style.display != "none")
document.getElementById(divname).style.display = "none";
else
out_layout(divname);
}
-->
</script>