经典三行两列布局带隐藏导航功能和菜单折叠功能:
源代码如下:
Code
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Navigate Page</title> <script language="javascript" type="text/jscript">
function showHideLeftPanel(obj)
{ var oStyle = leftPanel.style; oStyle.display == "none" ? oStyle.display = "" : oStyle.display = "none"; // var oStyle = obj.parentElement.parentElement.parentElement.rows[1].style; // oStyle.display == "none" ? oStyle.display = "block" : oStyle.display = "none"; 
} function showHide(obj) { var oStyle = obj.parentElement.parentElement.parentElement.rows[1].style; oStyle.display == "none" ? oStyle.display = "block" : oStyle.display = "none"; }
</script> <style type="text/css"> .style1 {}{ width: 100%; height: 454px; } .style2 {}{ height: 467px; } .style3 {}{ width: 144px; } .style4 {}{ width: 100%; } .style5 {}{ width: 1px; } </style></head><body> <form id="form1" runat="server"> <div> <table class="style1" border="2"> <tr> <td style="background-color: #CC00FF"> </td> </tr> <tr> <td class="style2"> <table class="style1" border="2" style="height: 100%" width="100%"> <tr> <td id="leftPanel" class="style3" valign="top" style="background-color: #00FFFF"> <table class="style4"> <tr> <td style="background-color: #C0C0C0" onclick="JavaScript:showHide(this);"> 货仓 </td> </tr> <tr> <td> <table class="style4"> <tr> <td> 仓库收获 </td> </tr> <tr> <td> 仓库入仓 </td> </tr> </table> </td> </tr> <tr> <td valign="top" style="background-color: #FFFFFF"> </td> </tr> </table> <table class="style4"> <tr> <td style="background-color: #C0C0C0" onclick="JavaScript:showHide(this);"> 会计 </td> </tr> <tr> <td> <table class="style4"> <tr> <td> >会计月结 </td> </tr> <tr> <td> > 会计对帐 </td> </tr> </table> </td> </tr> <tr> <td> </td> </tr> </table> </td> <td class="style5"> <a href="JavaScript:showHideLeftPanel(this);"> <img height="50" src="images/Menu/box_topleft.gif" width="2" /></a> </td> <td style="background-color: #CC9900"> </td> </tr> </table> </td> </tr> <tr> <td style="background-color: #808080"> </td> </tr> </table> </div> </form></body></html>