<html>
<head>
<title>菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.borderMenu { border: #CCCCCC; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
<script language=javascript>
function showmenu(num)
{
if(num.style.display=='none')
{
num.style.display='inline';
}
else
{
num.style.display='none';
}
}
</script>
</head>
<body bgcolor="ebf1fa" text="#000000">
<table width="16%" border="0" cellspacing="0" cellpadding="0" class="borderMenu">
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" onclick="showmenu(document.all.menu1);">
<div align="center">个人办公</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu1 name="menu1" style="display:inline">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">新建发文单</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">部门审核</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文会签</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">局办审核</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">局领导签发</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">文件编号</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文接收</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" onclick="showmenu(document.all.menu2);">
<div align="center">个人档案</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu2 name="menu2" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">名片夹</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">工作日志</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">通讯录</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">电子公告</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" onclick="showmenu(document.all.menu3);">
<div align="center">公文信息</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu3 name="menu3" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公文流程</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">业务信息</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">文件查询</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">发送短消息</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">公共信息</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" onclick="showmenu(document.all.menu4);">
<div align="center">管理工具</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" id=menu4 name="menu4" style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">部门维护</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户维护</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">权限管理</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">系统枚举</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="e7e7e7" class="borderMenu" height="24" style="cursor:hand" onclick="showmenu(document.all.menu5);">
<div align="center">用户管理</div>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="f7f7f7" name="menu5" id=menu5 style="display:none">
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户切换</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户权限分配</a></font></div>
</td>
</tr>
<tr>
<td height="24">
<div align="center"><font size="2"><a href="#">用户权限回收</a></font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
二、div方式
<html>
<head>
<script language="javascript">
function hideAll() {
for(i=0;i<odiv.length;i++) {
odiv[i].style.display="none";
}
}
function showObj(num)
{
if (odiv[num].style.display=="none")
{
hideAll();
odiv[num].style.display="inline";
}
else {
odiv[num].style.display="none";
}
}
</script>
<style type="text/css">
<!--
.divctrl{
cursor:hand;height:20px;
}
-->
</style>
</head>
<body>
<div onClick="showObj(0)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(1)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(2)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(3)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
<div onClick="showObj(4)" class="divctrl"><a href="#">div</a></div>
<div id="odiv" style="display:inline">
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
<li><a href="#">div</a></li>
</div>
</body>
</html>