DW中制作树形菜单

接上一篇

二、树形菜单的制作

制作思想：在网上找到的资料那棵树全部是用表格控制实现的，我看了看代码，加上平时使用div+css布局的习惯，感觉使用表格和div结合在一起来实现树形菜单更为灵活一些。所以最后就采用了table+div+css+javascript来实现树形菜单已经其收缩效果。

下面我将源码分享给大家，可以参考参考，也许你有更好的办法

body里的代码，我将收缩效果用到的javascript代码直接写到了div标签里，也可以单独拿出来写。还有用到的一些图片大家可以去网上下载或者直接截图也可以。

<div id="leftIndex"> <!--顶部图片--> <div id="imgTop"> <img src="image/leftTop.png" width="247" height="28" /> </div> <!--导航栏内容区--> <table class="tableLeft"> <tr> <td class="tdLfet"> <div id="froot1" class="fTitle"> <img onclick="froot2.style.display='block';froot1.style.display='none'" src="image/close.png" width="35" height="17"/>流程导航树 </div> <div id="froot2" class="fTitle"> <img onclick="froot2.style.display='none';froot1.style.display='block'" src="image/open.png" width="35" height="17"/>流程导航树 <div class="isFTitle"> <img src="image/T.png" width="20" height="17" /><img src="image/file.png" width="17" height="20" /><a href="DASubmitRequest.jsp" target="main">新建流程</a> </div> <div id="brotherRoot1" class="brotherRoot"> <img onclick="brotherRoot2.style.display='block';brotherRoot1.style.display='none'" src="image/close.png" width="35" height="17"/>按操作 </div> <div id="brotherRoot2" class="brotherRoot"> <img onclick="brotherRoot2.style.display='none';brotherRoot1.style.display='block'" src="image/open.png" width="35" height="17"/>按操作 <div class="isLTitle"> <img src="image/T.png" width="20" height="17" /><img src="image/file.png" width="17" height="20" /><a href="BUSPSave.jsp" target="main">草稿箱</a> </div> <div class="isLTitle"> <img src="image/T.png" width="20" height="17" /><img src="image/file.png" width="17" height="20" /><a href="BUSPReSubmitPermissionApplication.jsp" target="main">我申请的</a> </div> <div class="isLTitle"> <img src="image/T.png" width="20" height="17" /><img src="image/file.png" width="17" height="20" /><a href="DADeal.jsp" target="main">等我处理</a> </div> <div class="isLTitle"> <img src="image/L.png" width="20" height="17" /><img src="image/file.png" width="17" height="20" /><a href="DAFeedback.jsp" target="main">流程进度查询</a> </div> </div> </div> </td> <td class="tdRight"> <img src="image/r.png" width="18" height="480" /> </td> </tr> </table> </div>

CSS代码，单独放在css文件里，在页面头部引用即可。

/* 整体框架div样式控制 */ body { margin:0px; padding:0px; } #leftIndex{ text-align:left; width:250px; margin:0px; padding:0px; } /*导航区表格样式控制*/ .tableLeft{ width:249px; border:0px; margin:0px; padding:0px; } .tdLfet{ vertical-align:top; width:235px; padding-left:8px; } .tdRight{ width:auto; } /*图片样式控制*/ img{ cursor:pointer; margin:0px; padding:0px; } /*一级根目录的样式控制*/ .fTitle{ margin:0px; padding:0px; font-size:14px; vertical-align:middle; } #froot2{ vertical-align:middle; display:none; } /*一级子目录的样式控制*/ .isFTitle{ vertical-align:middle; margin:0px; padding:0px 0px 0px 15px; } /*二级根目录的样式控制*/ .brotherRoot{ vertical-align:middle; margin:0px; padding:0px 0px 0px 16px; } #brotherRoot2{ display:none; } /*二级级子目录的样式控制*/ .isLTitle{ vertical-align:middle; margin:0px; padding:0px 0px 0px 16px; font-size:13px; } /*连接样式控制*/ a{ text-decoration:none; }

最后实现的效果如下图：