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 
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 
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

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

转载于:https://www.cnblogs.com/walkingp/archive/2009/06/14/1502836.html

div布局改进treeview导航相关推荐

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
通用的网页底部导航div布局代码
通用的网页底部导航div布局代码黑色的云服务器公司网页底部快速导航div布局通用模板代码.产品服务,地区划分,快速入口,帮助支持,关于我们等. 演示地址下载地址
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局步骤: 在views目录下新建Main.vue文件,作为登录之后的布局参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
彻底弄懂CSS盒子模式一(DIV布局快速入门)
彻底弄懂CSS盒子模式一(DIV布局快速入门) 作者:唐国辉实例网页网址:http://www.blueidea.com/articleimg/2007/03/4545/css2.ht ...
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计
本文代码为CSS定位与DIV布局实战-新疆行知书网页设计的代码 by:arsoooo 网页效果如下: 源代码(相关文件下载在最后) index.html文件代码 //index.html的代码如下 & ...
h5的div布局详解
在实际的网页开发中,网页的整体部分一般是由div标签来进行布局的.那么在使用div布局之前就要了解div的属性 div是块级元素块级元素在页面中的独占一行默认情况下的高度由里面的内容决定.由于块级 ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...

div布局改进treeview导航

div布局改进treeview导航相关推荐

最新文章

热门文章