DW中制作树形菜单

来源：互联网发布：淘宝美工免费教学视频编辑：程序博客网时间：2024/05/02 00:24

接上一篇

二、树形菜单的制作

制作思想：在网上找到的资料那棵树全部是用表格控制实现的，我看了看代码，加上平时使用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;}

最后实现的效果如下图：