[转]静态框架导航，左侧折叠树的样式，类似于treeview

最新推荐文章于 2023-07-11 23:33:46 发布

weixin_34415923

最新推荐文章于 2023-07-11 23:33:46 发布

阅读量128

点赞数

文章标签： xhtml javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/qqingmu/archive/2009/08/31/1557314.html

版权

本文参考：王宏件的文章 http://www.cnblogs.com/walkingp/archive/2009/06/14/1502836.html
本文介绍一种简单的左侧树的框架静态导航，下面对左侧菜单进行div布局，仿照了treeview中contacts主题，增强图片点击切换上下换向（还是图片＾＾），每次只展开一项，可自定义展开项（默认第一项展开).

效果

HTML

Code
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

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/qqingmu/archive/2009/08/31/1557314.html