div布局改进treeview导航

asp.net对新手来讲真是福音，随便拖几下就是一个网页．让我这个从asp转来的菜鸟开始兴奋不已，尤其在几个数据绑定控件还有验证控件，但两个月下来后让我对这些控件兴趣全无，尤其是数据绑定控件如gridview．我现在基本上不再使用服务器控件了．．．最最恼人的就是那个treeview，点一下刷一下，网站后台我自己都不忍心看．

切入正题．网站后台如果不使用ajax控件实现无刷的话，个人觉得还是传统的（上）左右较符合用户心理，体验也不错．因此还使用框架来做后台．下面对左侧菜单进行div布局，仿照了treeview中contacts主题，增强图片点击切换上下换向（还是图片＾＾），每次只展开一项，可自定义展开项（默认第一项展开).

 效果

HTML

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" >
  3 <head>
  4 <title></title>
  7 <link href="css/layoutLeft.css" rel="stylesheet" type="text/css" />
  8 <script type="text/javascript">
  9 <!--
 10 ///功能：折叠菜单
 11 ///王洪剑http://www.51obj.cn/
 12 ///2009-6-13
 13 var intOpenIndex=0;//默认展开
 14 function showMenu(arg)
 15 {
 16     var objH5=document.getElementsByTagName("h5");
 17     for(var i=0;i<objLi.length;i++)
 18     {
 19         if(i==arg)//展开
 20         {
 21             objLi[i].className=(objLi[i].className=="menuList")?"menuListOpen":"menuList";
 22             objH5[i].className=(objH5[i].className="h5Normal")?"h5Open":"h5Normal";
 23         }
 24         else//折叠
 25         {
 26             objLi[i].className="menuList";
 27             objH5[i].className="h5Normal";
 28         }
 29     }
 30 }
 31 //-->
 32 </script>
 33 </head>
 34 <body>
 35 <div id="menuBar">
 36     <h5 class="h5Normal" onclick="showMenu(0)">文章管理</h5>
 37     <ul id="menu0" class="menuList">
 38         <li><a href="#" target="right">所有文章</a></li>
 39         <li><a href="#" target="right">添加文章</a></li>
 40         <li><a href="#" target="right">管理类别</a></li>
 41     </ul>
 42     <h5 class="h5Normal" onclick="showMenu(1)">产品管理</h5>
 43     <ul id="menu1" class="menuList">
 44         <li><a href="#" target="right">所有产品</a></li>
 45         <li><a href="#" target="right">产品分类</a></li>
 46     </ul>
 47     <h5 class="h5Normal" onclick="showMenu(2)">公告管理</h5>
 48     <ul id="menu2" class="menuList">
 49         <li><a href="#" target="right">所有公告</a></li>
 50         <li><a href="#" target="right">添加公告</a></li>
 51     </ul>
 52     <h5 class="h5Normal" onclick="showMenu(3)">供求管理</h5>
 53     <ul id="menu3" class="menuList">
 54         <li><a href="#" target="right">供应信息</a></li>
 55         <li><a href="#" target="right">求购信息</a></li>
 56     </ul>
 57     <h5 class="h5Normal" onclick="showMenu(4)">招聘管理</h5>
 58     <ul id="menu4" class="menuList">
 59         <li><a href="#" target="right">所有招聘</a></li>
 60         <li><a href="#" target="right">添加招聘</a></li>
 61         <li><a href="#" target="right">查看应聘</a></li>
 62     </ul>
 63     <h5 class="h5Normal" onclick="showMenu(5)">会员管理</h5>
 64     <ul id="menu5" class="menuList">
 65         <li><a href="#" target="right">所有会员</a></li>
 66         <li><a href="#" target="right">添加会员</a></li>
 67     </ul>
 68     <h5 class="h5Normal" onclick="showMenu(6)">链接管理</h5>
 69     <ul id="menu6" class="menuList">
 70         <li><a href="#" target="right">所有链接</a></li>
 71         <li><a href="#" target="right">类别管理</a></li>
 72     </ul>
 73     <h5 class="h5Normal" onclick="showMenu(7)">用户管理</h5>
 74     <ul id="menu7" class="menuList">
 75         <li><a href="#" target="right">所有用户</a></li>
 76         <li><a href="#" target="right">角色管理</a></li>
 77         <li><a href="#" target="right">修改密码</a></li>
 78     </ul>
 79     <h5 class="h5Normal" onclick="showMenu(8)">系统管理</h5>
 80     <ul id="menu8" class="menuList">
 81         <li><a href="#" target="right">网站配置</a></li>
 82         <li><a href="#" target="right">日志管理</a></li>
 83         <li><a href="#" target="right">广告管理</a></li>
 84         <li><a href="#" target="right">数据备份</a></li>
 85     </ul>
 86     <h5 class="h5Normal" onclick="showMenu(9)">系统帮助</h5>
 87     <ul id="menu9" class="menuList">
 88         <li><a href="#" target="right">关于主题</a></li>
 89         <li><a href="#" target="right">使用帮助</a></li>
 90         <li><a href="#" target="right">使用反馈</a></li>
 91     </ul>
 92 </div>
 93 <script type="text/javascript">
 94 <!--
 95 var objLi=document.getElementsByTagName("ul");
 96 objLi[intOpenIndex].className="menuListOpen";
 97 //-->
 98 </script>
 99 </body>
100 </html>
101 

 

CSS

 

Code

 

 

演示:http://www.51obj.cn/demo/treeview/left.html

下载:http://www.51obj.cn/download/treeview.rar

 (很抱歉,昨天没有写完误点了发布...)

posted @ 2009-06-14 00:33  walkingp  阅读(2039)  评论(0)  编辑  收藏  举报