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
body{
background:url(../images/leftBg.png) #63A67D repeat-x;
font-size:12px;
color:#020;
text-align:center;
width:180px;
}
a:link,a:visited{
color:#000;
}
a:hover{
text-decoration:underline;
padding-left:4px;
}
h5,.h5Normal{
color:#fff;
font-size:12px;
background:url(../images/menu_Main.gif) 36px 0 no-repeat;
padding-left:5px;
cursor:pointer;
margin-top:4px;
}
h5:hover,.h5Normal:hover{
text-decoration:underline;
}
.h5Open{
background:url(../images/menu_Main_Open.gif) 36px 0 no-repeat;
}
li{
background:url(../images/menu_sub.gif) 40px 0 no-repeat;
padding:4px 4px 4px 10px;
}
#menuBar{
padding:10px;
margin:auto;
}
.menuList{
display:none;
}
.menuListOpen{
display:block;
}

 

 

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

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

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