css树形导航菜单代码实例
分类：实例代码
分享一段代码实例，它利用css实现了树形导航菜单效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
background: #fefefe;
}
.tree {
list-style: none;
padding-left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tree > .tree-node .tree {
display: block;
overflow-y: hidden;
max-height: 300px;
height: auto;
-webkit-transition: max-height .5s ease-in;
-moz-transition: max-height .5s ease-in;
-o-transition: max-height .5s ease-in;
transition: max-height .5s ease-in;
}
.tree-node {
margin-top: -3px;
}
.tree input.node-check {
display: none;
}
.tree > .tree-node > label {
cursor: pointer;
}
.tree .node-content {
display: inline-block;
}
.tree .node-content > .node-text {
font-size: 12px;
line-height: 14px;
margin-left: -4px;
}
.tree .node-content > .node-text:hover {
color: #00A000;
}
.node-icon {
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
}
.node-check:checked + .node-content > .tree {
max-height: 0;
}
.node-check:checked + .node-content > .icon-folder {
background-image: url(demo/CSS/img/folder.gif);
}
.node-check:checked + .node-content > .icon-expand {
background-image: url(demo/CSS/img/elbow-end-plus-nl.gif);
}
.icon-expand {
background-image: url(demo/CSS/img/elbow-end-minus-nl.gif);
}
.icon-minus {
background-image: url(demo/CSS/img/elbow-minus.gif);
}
.icon-elbow {
background-image: url(demo/CSS/img/elbow.gif);
}
.icon-elbow-line {
background-image: url(demo/CSS/img/elbow-line.gif);
}
.icon-elbow-end {
background-image: url(demo/CSS/img/elbow-end.gif);
}
.icon-file {
background-image: url(demo/CSS/img/leaf.gif);
}
.icon-folder {
background-image: url(demo/CSS/img/folder-open.gif);
}
</style>
</head>
<body>
<ul class="tree">
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-expand"></i>
<i class="node-icon icon-folder"></i>
<span class="node-text">目录1</span>
<ul class="tree">
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">文件1</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">文件1</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-expand"></i>
<i class="node-icon icon-folder"></i>
<span class="node-text">目录22</span>
<ul class="tree">
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">pipipi.net</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">前端教程网</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">div教程</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow-line"></i>
<i class="node-icon icon-elbow-end"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">css教程</span>
</div>
</label>
</li>
</ul>
</div>
</label>
</li>
</ul>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">js教程</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon icon-expand"></i>
<i class="node-icon icon-folder"></i>
<span class="node-text">jquery教程</span>
<ul class="tree">
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">json教程</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">css3教程</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon"></i>
<i class="node-icon icon-elbow"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">html教程</span>
</div>
</label>
</li>
<li class="tree-node">
<label>
<input class="node-check" type="checkbox">
<div class="node-content">
<i class="node-icon"></i>
<i class="node-icon icon-elbow-end"></i>
<i class="node-icon icon-file"></i>
<span class="node-text">ajax教程</span>
</div>
</label>
</li>
</ul>
</div>
</label>
</li>
</ul>
</body>
</html>