Web前端纯CSS树形菜单
摘要：开发好看前端框架 微信网页开发前端框架 浏览器前端开发的框架 html结构： ul.tree li.tree-node label input.node-check div.node-content i.node-icon …… span.node-text ul.tree …… css 代码片段 .tree { ……
开发好看前端框架 微信网页开发前端框架 浏览器前端开发的框架
html结构：
ul.tree
li.tree-node
label
input.node-check
div.node-content
i.node-icon
……
span.node-text
ul.tree
……
css 代码片段
.tree {
list-style: none;
padding-left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-o-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 0.5s ease-in;
-moz-transition: max-height 0.5s ease-in;
-o-transition: max-height 0.5s ease-in;
-ms-transition: max-height 0.5s ease-in;
transition: max-height 0.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;
font-family: arial, verdana, Microsoft YaHei, Tahoma, Simsun, sans-serif;
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(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder.gif);
}
.node-check:checked + .node-content > .icon-expand {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
}
.icon-expand {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
}
.icon-minus {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
}
.icon-elbow {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow.gif);
}
.icon-elbow-line {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-line.gif);
}
.icon-elbow-end {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end.gif);
}
.icon-file {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/leaf.gif);
}
.icon-folder {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder-open.gif);
}
html 代码片段
<!doctype html>
<html>
<head>
<title>树形菜单</title>
<meta charset=”utf-8″>
<style>
body {
background: #fefefe;
}
.tree {
list-style: none;
padding-left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-o-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;
-ms-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;
font-family: arial, verdana, Microsoft YaHei, Tahoma, Simsun, sans-serif;
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(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder.gif);
}
.node-check:checked+.node-content>.icon-expand {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
}
.icon-expand {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
}
.icon-minus {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
}
.icon-elbow {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow.gif);
}
.icon-elbow-line {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-line.gif);
}
.icon-elbow-end {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end.gif);
}
.icon-file {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/leaf.gif);
}
.icon-folder {
background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/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”>asadsadsa</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”>asdsads</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”>assgghgsdgh</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”>sdfdfsas</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”>xxxxx</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”>yyyyyy</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”>zzzzzz</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”>zzzzzz</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”>zzzzzz</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”>zzzzzz</span>
</div>
</label>
</li>
</ul>
</div>
</label>
</li>
</ul>
</body>
</html>
前端在项目开发中如何选择框架 ui设计web前端开发框架 好未来前端开发框架
» 本文来自：前端开发者 » 《Web前端纯CSS树形菜单》
» 本文链接地址：https://www.rokub.com/5504.html
» 您也可以订阅本站：https://www.rokub.com
近期评论