This code is based on this sample: http://thecodeplayer.com/walkthrough/css3-family-tree
and added the hability to set some nodes vertically.
Not fully tested, it just worked for my needs.
A Pen by Bernardo Antunes on CodePen.
This code is based on this sample: http://thecodeplayer.com/walkthrough/css3-family-tree
and added the hability to set some nodes vertically.
Not fully tested, it just worked for my needs.
A Pen by Bernardo Antunes on CodePen.
<div class="tree"> | |
<ul> | |
<li> | |
<a href="#">Ninja Board</a> | |
<ul> | |
<li> | |
<a href="#">Staff</a> | |
<ul class="vertical"> | |
<li><a href="#">Human Resources</a></li> | |
<li><a href="#">Finance</a></li> | |
<li><a href="#">Marketing</a></li> | |
<li><a href="#">IT/IS</a></li> | |
<li><a href="#">Service Delivery</a></li> | |
</ul> | |
</li> | |
<li> | |
<a href="#">BAMs</a> | |
<ul class="vertical"> | |
<li><a href="#">Applications</a></li> | |
<li><a href="#">Mobility</a></li> | |
<li><a href="#">Collaboration</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Knowledge Committee</a></li> | |
<li> | |
<a href="#">Delivery Lund</a> | |
<ul> | |
<li> | |
<a href="#">Team Leads</a> | |
<ul class="vertical"> | |
<li><a href="#">Team 1</a></li> | |
<li><a href="#">Team 2</a></li> | |
<li><a href="#">Team 3</a></li> | |
<li><a href="#">Team 4</a></li> | |
<li><a href="#">Team 5</a></li> | |
<li><a href="#">Team 6</a></li> | |
<li><a href="#">Team 7</a></li> | |
<li><a href="#">Team 8</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Sales</a></li> | |
</ul> | |
</li> | |
<li> | |
<a href="#">Delivery Stockholm</a> | |
<ul> | |
<li> | |
<a href="#">Team Leads</a> | |
<ul class="vertical"> | |
<li><a href="#">Hokutō</a></li> | |
<li><a href="#">The Other Team</a></li> | |
</ul> | |
</li> | |
<li><a href="#">Sales</a></li> | |
</ul> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</div> |
/* Code based on this sample http://thecodeplayer.com/walkthrough/css3-family-tree */ | |
/*Now the CSS*/ | |
.tree * {margin: 0; padding: 0;} | |
.tree ul { | |
padding-top: 20px; position: relative; | |
transition: all 0.5s; | |
-webkit-transition: all 0.5s; | |
-moz-transition: all 0.5s; | |
} | |
.tree li { | |
float: left; text-align: center; | |
list-style-type: none; | |
position: relative; | |
padding: 20px 5px 0 5px; | |
transition: all 0.5s; | |
-webkit-transition: all 0.5s; | |
-moz-transition: all 0.5s; | |
} | |
/*We will use ::before and ::after to draw the connectors*/ | |
.tree li::before, .tree li::after{ | |
content: ''; | |
position: absolute; top: 0; right: 50%; | |
border-top: 1px solid #8dc63f; | |
width: 50%; height: 20px; | |
} | |
.tree li::after{ | |
right: auto; left: 50%; | |
border-left: 1px solid #8dc63f; | |
} | |
/*We need to remove left-right connectors from elements without | |
any siblings*/ | |
.tree li:only-child::after, .tree li:only-child::before { | |
display: none; | |
} | |
/*Remove space from the top of single children*/ | |
.tree li:only-child{ padding-top: 0;} | |
/*Remove left connector from first child and | |
right connector from last child*/ | |
.tree li:first-child::before, .tree li:last-child::after{ | |
border: 0 none; | |
} | |
/*Adding back the vertical connector to the last nodes*/ | |
.tree li:last-child::before{ | |
border-right: 1px solid #8dc63f; | |
border-radius: 0 5px 0 0; | |
-webkit-border-radius: 0 5px 0 0; | |
-moz-border-radius: 0 5px 0 0; | |
} | |
.tree li:first-child::after{ | |
border-radius: 5px 0 0 0; | |
-webkit-border-radius: 5px 0 0 0; | |
-moz-border-radius: 5px 0 0 0; | |
} | |
/*Time to add downward connectors from parents*/ | |
.tree ul ul::before{ | |
content: ''; | |
position: absolute; top: 0; left: 50%; | |
border-left: 1px solid #8dc63f; | |
width: 0; height: 20px; | |
} | |
.tree li a{ | |
border: 1px solid #8dc63f; | |
padding: 1em 0.75em; | |
text-decoration: none; | |
color: #666767; | |
font-family: arial, verdana, tahoma; | |
font-size: 0.85em; | |
display: inline-block; | |
/* | |
border-radius: 5px; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
*/ | |
transition: all 0.5s; | |
-webkit-transition: all 0.5s; | |
-moz-transition: all 0.5s; | |
} | |
/* -------------------------------- */ | |
/* Now starts the vertical elements */ | |
/* -------------------------------- */ | |
.tree ul.vertical, ul.vertical ul { | |
padding-top: 0px; | |
left: 50%; | |
} | |
/* Remove the downward connectors from parents */ | |
.tree ul ul.vertical::before { | |
display: none; | |
} | |
.tree ul.vertical li { | |
float: none; | |
text-align: left; | |
} | |
.tree ul.vertical li::before { | |
right: auto; | |
border: none; | |
} | |
.tree ul.vertical li::after{ | |
display: none; | |
} | |
.tree ul.vertical li a{ | |
padding: 10px 0.75em; | |
margin-left: 16px; | |
} | |
.tree ul.vertical li::before { | |
top: -20px; | |
left: 0px; | |
border-bottom: 1px solid #8dc63f; | |
border-left: 1px solid #8dc63f; | |
width: 20px; height: 60px; | |
} | |
.tree ul.vertical li:first-child::before { | |
top: 0px; | |
height: 40px; | |
} | |
/* Lets add some extra styles */ | |
div.tree > ul > li > ul > li > a { | |
width: 11em; | |
} | |
div.tree > ul > li > a { | |
font-size: 1em; | |
font-weight: bold; | |
} | |
/* ------------------------------------------------------------------ */ | |
/* Time for some hover effects */ | |
/* We will apply the hover effect the the lineage of the element also */ | |
/* ------------------------------------------------------------------ */ | |
.tree li a:hover, .tree li a:hover+ul li a { | |
background: #8dc63f; | |
color: white; | |
/* border: 1px solid #aaa; */ | |
} | |
/*Connector styles on hover*/ | |
.tree li a:hover+ul li::after, | |
.tree li a:hover+ul li::before, | |
.tree li a:hover+ul::before, | |
.tree li a:hover+ul ul::before{ | |
border-color: #aaa; | |
} |