首页 > 代码库 > 简单的树形目录展示
简单的树形目录展示
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>树形菜单</title>
<style type="text/css" media="all">
a,a:visited {
color:#333;
text-decoration:none;
}
a:hover {
color:#f60;
}
body,td {
font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
h1,h2,h3,h4,h5,h6 {
margin:0;
padding:0;
}
h1 {
padding:5px;
color:#900;
font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;
}
h1 small {
font-size:11px;
font-weight:normal;
color:#660;
}
.TreeWrap {
width:200px;
}
.MenuBox .titBox a,
.MenuBox .titBox a:visited,
.MenuBox2 .titBox a,
.MenuBox2 .titBox a:visited {
margin-left:10px;
padding-left:40px;
color:#003;
font-size:12px;
display:block;
}
.MenuBox .titBox h3 a {
background:url(img/st_folder_open.gif) no-repeat 0 40%;
}
.MenuBox .titBox h3.Fst a {
background:url(img/st_folder_open.gif) no-repeat 0 40%;
}
.MenuBox .titBox h3.Lst a {
background:url(img/st_folder.gif) no-repeat 0 40%;
}
.MenuBox2 .titBox h3 a {
background:url(img/st_folder.gif) no-repeat 0 40%;
}
.MenuBox2 .titBox h3.Fst a {
background:url(img/st_folder.gif) no-repeat 0 40%;
}
.MenuBox2 .titBox h3.Lst a {
line-height:250%;background:url(img/st_folder.gif) no-repeat 0 0;
}
/*这句是关键*/
.MenuBox2 .txtBox {
display:none;
}
.MenuBox .txtBox ul li {
padding-left:65px;
line-height:150%;
}
.MenuBox .txtBox .num {
color:#e00;
}
.MenuBox .txtBox ul {
background:url(images/line_y.gif) repeat-y 16px 0;
}
.MenuBox .txtBox ul li {
background:url(images/t.gif) no-repeat 28px 50%;
}
.MenuBox .txtBox ul li.Lst {
background:url(images/t_lst.gif) no-repeat 28px 50%;
}
</style>
<script type="text/javascript">
function ExChgClsName(Obj,NameA,NameB){
var Obj = document.getElementById(Obj) ? document.getElementById(Obj):Obj;
Obj.className = Obj.className == NameA?NameB:NameA;
}
function showMenu(iNo){
ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
}
</script>
</head>
<body>
<h1>欢迎各位欣赏 <small>我的QQ列表</small></h1>
<div class="TreeWrap">
<div class="MenuBox" id="Menu_0">
<div class="titBox"><h3 class="Fst"><a href="javascript:showMenu(0);">同事</a></h3>
</div>
<div class="txtBox">
<ul>
<li><a href="http://www.mamicode.com/#">西伯利亚狼</a></li>
<li><a href="http://www.mamicode.com/#">小春</a></li>
<li><a href="http://www.mamicode.com/#">小林</a></li>
<li><a href="http://www.mamicode.com/#">小龙</a></li>
<li class="Lst"><a href="http://www.mamicode.com/#">开心果??</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_1">
<div class="titBox"><h3><a href="javascript:showMenu(1);">客户</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="http://www.mamicode.com/#">杨董</a></li>
<li><a href="http://www.mamicode.com/#">小蓟里</a></li>
<li><a href="http://www.mamicode.com/#">小林</a></li>
<li><a href="http://www.mamicode.com/#">小龙</a></li>
<li class="Lst"><a href="http://www.mamicode.com/#">欧阳少佐</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_2">
<div class="titBox"><h3><a href="javascript:showMenu(2);">朋友</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="http://www.mamicode.com/#">死党</a></li>
<li><a href="http://www.mamicode.com/#">要钱的</a></li>
<li><a href="http://www.mamicode.com/#">欠我钱的</a></li>
<li><a href="http://www.mamicode.com/#">好色的</a></li>
<li class="Lst"><a href="http://www.mamicode.com/#">漂亮的</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2" id="Menu_3">
<div class="titBox"><h3><a href="javascript:showMenu(3);">家人</a></h3></div>
<div class="txtBox">
<ul>
<li><a href="http://www.mamicode.com/#">Dodo</a></li>
<li><a href="http://www.mamicode.com/#">Tom</a></li>
<li><a href="http://www.mamicode.com/#">小林</a></li>
<li><a href="http://www.mamicode.com/#">小龙</a></li>
<li class="Lst"><a href="http://www.mamicode.com/#">华美</a></li>
</ul>
</div>
</div><!--MenuBox-->
<div class="MenuBox2">
<div class="titBox"><h3 class="Lst"><a href="http://www.mamicode.com/#">展示完毕，谢谢各位</a></h3></div>
</div><!--MenuBox-->
</div>
</body>
</html>
以上就是我分享简单的树形目录QQ列表的展示，如有不足的地方，还请各位博友斧正！谢谢大家！
简单的树形目录展示