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
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;
}
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
(很抱歉,昨天没有写完误点了发布...)