A simple and responsive organizational chart (HTML5 and CSS3 only) Family Tree has been implemented in Pure CSS and HTML nested lists.
responsive organization chart codepen, org chart codepen, html5 organizational chart, interactive organizational chart html, organizational chart api
How to make use of it:
1. Create a hierarchical organization chart from the nested ordered lists as follows:
<ol class="organizational-chart">
<li>
<div>
<h1>Primary</h1>
</div>
<div>
<h1>Primary</h1>
</div>
<div>
<h1>Primary</h1>
</div>
<ol>
<li>
<div>
<h2>Secondary</h2>
</div>
<ol>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
<ol>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
<li>
<div>
<h4>Quaternary</h4>
</div>
<ol>
<li>
<div>
<h5>Quinary</h5>
</div>
</li>
<li>
<div>
<h5>Quinary</h5>
</div>
<ol>
<li>
<div>
<h6>Senary</h6>
</div>
</li>
</ol>
</li>
</ol>
</li>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
</ol>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
</ol>
</li>
<li>
<div>
<h2>Secondary</h2>
</div>
<ol>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
<ol>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
</ol>
</li>
</ol>
</li>
<li>
<div>
<h2>Secondary</h2>
</div>
<ol>
<li>
<div>
<h3>Tertiary</h3>
</div>
<ol>
<li>
<div>
<h4>Quaternary</h4>
</div>
<ol>
<li>
<div>
<h5>Quinary</h5>
</div>
<ol>
<li>
<div>
<h6>Senary</h6>
</div>
</li>
<li>
<div>
<h6>Senary</h6>
</div>
</li>
</ol>
</li>
<li>
<div>
<h5>Quinary</h5>
</div>
</li>
</ol>
</li>
</ol>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
</ol>
</li>
<li>
<div>
<h2>Secondary</h2>
</div>
<ol>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
<ol>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
<li>
<div>
<h4>Quaternary</h4>
</div>
</li>
</ol>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
<li>
<div>
<h3>Tertiary</h3>
</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>2. The main CSS styles for the org chart.
ol.organizational-chart,
ol.organizational-chart ol,
ol.organizational-chart li,
ol.organizational-chart li > div {
position: relative;
}
ol.organizational-chart,
ol.organizational-chart ol {
list-style: none;
margin: 0;
padding: 0;
}
ol.organizational-chart {
text-align: center;
}
ol.organizational-chart ol {
padding-top: 1em;
}
ol.organizational-chart ol:before,
ol.organizational-chart ol:after,
ol.organizational-chart li:before,
ol.organizational-chart li:after,
ol.organizational-chart > li > div:before,
ol.organizational-chart > li > div:after {
background-color: #b7a6aa;
content: '';
position: absolute;
}
ol.organizational-chart ol > li {
padding: 1em 0 0 1em;
}
ol.organizational-chart > li ol:before {
height: 1em;
left: 50%;
top: 0;
width: 3px;
}
ol.organizational-chart > li ol:after {
height: 3px;
left: 3px;
top: 1em;
width: 50%;
}
ol.organizational-chart > li ol > li:not(:last-of-type):before {
height: 3px;
left: 0;
top: 2em;
width: 1em;
}
ol.organizational-chart > li ol > li:not(:last-of-type):after {
height: 100%;
left: 0;
top: 0;
width: 3px;
}
ol.organizational-chart > li ol > li:last-of-type:before {
height: 3px;
left: 0;
top: 2em;
width: 1em;
}
ol.organizational-chart > li ol > li:last-of-type:after {
height: 2em;
left: 0;
top: 0;
width: 3px;
}
ol.organizational-chart li > div {
background-color: #fff;
border-radius: 3px;
min-height: 2em;
padding: 0.5em;
}
/*** PRIMARY ***/
ol.organizational-chart > li > div {
background-color: #a2ed56;
margin-right: 1em;
}
ol.organizational-chart > li > div:before {
bottom: 2em;
height: 3px;
right: -1em;
width: 1em;
}
ol.organizational-chart > li > div:first-of-type:after {
bottom: 0;
height: 2em;
right: -1em;
width: 3px;
}
ol.organizational-chart > li > div + div {
margin-top: 1em;
}
ol.organizational-chart > li > div + div:after {
height: calc(100% + 1em);
right: -1em;
top: -1em;
width: 3px;
}
/*** SECONDARY ***/
ol.organizational-chart > li > ol:before {
left: inherit;
right: 0;
}
ol.organizational-chart > li > ol:after {
left: 0;
width: 100%;
}
ol.organizational-chart > li > ol > li > div {
background-color: #83e4e2;
}
/*** TERTIARY ***/
ol.organizational-chart > li > ol > li > ol > li > div {
background-color: #fd6470;
}
/*** QUATERNARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > div {
background-color: #fca858;
}
/*** QUINARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div {
background-color: #fddc32;
}
3. Make your organizational chart fully responsive via the browser.
@media only screen and ( min-width: 64em ) {
ol.organizational-chart {
margin-left: -1em;
margin-right: -1em;
}
/* PRIMARY */
ol.organizational-chart > li > div {
display: inline-block;
float: none;
margin: 0 1em 1em 1em;
vertical-align: bottom;
}
ol.organizational-chart > li > div:only-of-type {
margin-bottom: 0;
width: calc((100% / 1) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
width: calc((100% / 2) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
width: calc((100% / 3) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
width: calc((100% / 4) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
width: calc((100% / 5) - 2em - 4px);
}
ol.organizational-chart > li > div:before,
ol.organizational-chart > li > div:after {
bottom: -1em!important;
top: inherit!important;
}
ol.organizational-chart > li > div:before {
height: 1em!important;
left: 50%!important;
width: 3px!important;
}
ol.organizational-chart > li > div:only-of-type:after {
display: none;
}
ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after,
ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
bottom: -1em;
height: 3px;
width: calc(50% + 1em + 3px);
}
ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after {
left: calc(50% + 3px);
}
ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
left: calc(-1em - 3px);
}
ol.organizational-chart > li > div + div:not(:last-of-type):after {
height: 3px;
left: -2em;
width: calc(100% + 4em);
}
/* SECONDARY */
ol.organizational-chart > li > ol {
display: flex;
flex-wrap: nowrap;
}
ol.organizational-chart > li > ol:before,
ol.organizational-chart > li > ol > li:before {
height: 1em!important;
left: 50%!important;
top: 0!important;
width: 3px!important;
}
ol.organizational-chart > li > ol:after {
display: none;
}
ol.organizational-chart > li > ol > li {
flex-grow: 1;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
}
ol.organizational-chart > li > ol > li:only-of-type {
padding-top: 0;
}
ol.organizational-chart > li > ol > li:only-of-type:before,
ol.organizational-chart > li > ol > li:only-of-type:after {
display: none;
}
ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after,
ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
height: 3px;
top: 0;
width: 50%;
}
ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after {
left: 50%;
}
ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
left: 0;
}
ol.organizational-chart > li > ol > li + li:not(:last-of-type):after {
height: 3px;
left: 0;
top: 0;
width: 100%;
}
}responsive hierarchical organization chart Plugin/Codepen
See Demo And DownloadÂ
Official Website(erinesullivan): Click Here
This superior jQuery/javascript plugin is developed by erinesullivan. For extra advanced usage, please go to the official website.
