Display unordered list as Tree View
Description
The following code shows how to display unordered list as Tree View.
Example
<!--Code revised from
http://fiddle.jshell.net/harshveer/KkRas/-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
.tree ul {<!--from www . j a v a2s.c o m-->
padding: 0;
margin: 0;
list-style-type: none;
}
.tree li {
position: relative;
padding: 4px 0 4px 20px;
}
.tree .wrapper {
position: relative;
display: block;
}
.tree .wrapper::before {
content: '';
position: absolute;
width: 24px;
left: -20px;
height: 50%;
border-bottom: 2px solid black;
}
.tree li::before {
content: '';
position: absolute;
left: 0;
height: 100%;
border-left: 2px solid black;
}
.tree .sub-list::after {
content: '';
position: absolute;
height: 50%;
height: calc(50% + 4px);
height: -webkit-calc(50% + 4px);
top: 50%;
left: 0;
border-right: 2px solid black;
}
.tree li:last-child::before {
content: '';
position: absolute;
border-left: 0 none;
}
.tree li:last-child .wrapper::before {
width: 23px;
border-left: 2px solid black;
}
.tree .expand-icon {
position: absolute;
line-height: 16px;
font-size: 16px;
top: calc(50% - 8px);
left: -27px;
background-color: white;
padding: 0 1px;
}
/*Align thumbnails*/
.tree .thumb-icon {
position: absolute;
font-size: 16px;
line-height: 16px;
top: calc(50% - 8px);
top: -webkit-calc(50% - 8px);
left: 7px;
}
/*Shift list items forward*/
.tree .wrapper {
padding-left: 24px;
}
/*Give border to list items*/
.tree .border {
display: inline-block;
border: 1px solid black;
border-radius: 4px;
padding-right: 3px;
padding-left: 20px;
margin-left: -20px;
}
.tree .expand-icon {
cursor: pointer;
}
</style>
</head>
<body>
<body>
<div class="tree">
<ul>
<li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
class="border">Item 1</span><span></span></li>
<li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
class="border">Item 2</span></span></li>
<li><span class="wrapper sub-list"><i
class="icon-plus-sign-alt expand-icon"></i> <i
class="icon-folder-open thumb-icon"></i><span class="border">Item
3 with sub items</span></span>
<ul>
<li><span class="wrapper"><i
class="icon-file thumb-icon"></i><span class="border">Sub-Item
1</span></span></li>
<li><span class="wrapper sub-list"><i
class="icon-plus-sign-alt expand-icon"></i> <i
class="icon-folder-open thumb-icon"></i><span class="border">Sub-Item
2 with sub-sub items</span></span>
<ul>
<li><span class="wrapper"><i
class="icon-file thumb-icon"></i><span class="border">Sub-Sub-1</span></span></li>
<li><span class="wrapper"><i
class="icon-file thumb-icon"></i><span class="border">Sub-Sub-2</span></span></li>
<li><span class="wrapper"><i
class="icon-file thumb-icon"></i><span class="border">Sub-Sub-3</span></span></li>
</ul></li>
<li><span class="wrapper"><i
class="icon-file thumb-icon"></i><span class="border">Sub-Item
3</span></span></li>
</ul></li>
<li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
class="border">Item 4</span></span></li>
</ul>
</div>
</body>
</body>
</html>