Recently, there is a UE design that is the display of the horizontal tree. After looking up some information on the Internet, we didn't find the code of the horizontal tree. So we use:: before and:: after pseudo elements plus jq to implement it simply according to the actual needs. In the future, we have the opportunity to strive for further optimization.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transverse tree demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.tree{
padding: 0 50px;
}
.tree ul {
width: 210px;
position: absolute;
}
.tree ul ul{
left: 226px;
top: 0;
}
.tree li {
float: left;
list-style-type: none;
position: relative;
padding: 16px 5px 0 5px;
}
.tree li span {
position: relative;
display: inline-block;
width: 200px;
height: 36px;
background: #F0F0F5;
border-radius: 4px;
text-decoration: none;
color: #2D2D2D;
font-size: 14px;
line-height: 36px;
text-align: center;
}
.tree li::before{
box-sizing:inherit;
content: '';
position: absolute;
top: 33px;
left: -7px;
border-top: 2px solid #D2D2D7;
width: 12px;
}
.tree li::after {
box-sizing:inherit;
content: '';
position: absolute;
top: 8px;
left: -9px;
height: 100%;
border-left: 2px solid #D2D2D7;
}
.tree li:first-child::after{
height: 50%;
border-left: 2px solid #D2D2D7;
border-top: 2px solid #D2D2D7;
top: 33px;
width: 1px;
border-top-left-radius: 4px;
}
.tree li:last-child::after{
height: 25px;
border-left: 2px solid #D2D2D7;
border-bottom: 2px solid #D2D2D7;
top: 8px;
width: 1px;
border-bottom-left-radius: 4px;
}
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
.tree ul ul li:only-child::before{
display: inline-block;
}
.tree ul ul li:only-child span::before{
display: inline-block;
}
.tree li:only-child span.root::before,.tree li:only-child span.hasChild::before{
content: '';
position: absolute;
top: 17px;
right: -14px;
border-top: 2px solid #D2D2D7;
width: 14px;
}
.tree ul ul ul li:only-child span::before{
content: '';
position: absolute;
top: 17px;
left: -26px;
border-top: 2px solid #D2D2D7;
width: 26px;
}
</style>
</head>
<body>
<div class="tree">
<ul>
<li>
<span class="root">Report name</span>
<ul>
<li>
<span>Function name 1</span>
<ul>
<li>
<span>Tile name 1</span>
</li>
<li>
<span>Tile name 2</span>
</li>
<li>
<span>Tile name 3</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
if($('.root').siblings('ul').children('li').length==1){
var num = 26*($('.root').siblings('ul').children('li').find('li').length-1);
$('.root').css({ 'top': num });
$('.root').siblings('ul').children('li').css({ 'top': num });
$('.root').siblings('ul').find('ul').css({ 'top': -num });
if($('.root').siblings('ul').find('li').length > 1){
$('.root').siblings('ul').children('li').children('span').addClass('hasChild');
}
}else{
$('.root').css({ 'top': 26 * ($('.root').siblings('ul').children('li').length - 1) });
}
</script>
</html>Effect:
ps: it should be noted that my current code only supports these two styles, namely:
1 parent node - 1 child node - 1 / multi child node, or 1 parent node - Multi child node - 1 child node. The style is modified by jq. Later, if there is time, we will study the optimization and strive for better reusability. I hope it can help you.
Welcome to exchange and discuss.