Javascript CSS Horizontal Employee Treeview
If you want to draw organization chart or family tree diagram addressing family associations in a normal tree structure. The designer has used a comparable thought in this as well. The tree is planned in level structure. As ought to be evident the part names close by the image are consolidated.Like you can see an individual named ‘John Doe’ included two individuals, Member 1 and Member 2.Similarly, Member 2 incorporates the other three individuals. Along these lines, the Tree view structure continues onward.
HTML
<div class="body genealogy-body genealogy-scroll"> <div class="genealogy-tree"> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> <ul class="active"> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1</h3> </div> </div> </div> </a> <ul > <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-1</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-2</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-3</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-3-1</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-3-2</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-3-3</h3> </div> </div> </div> </a> </li> </ul> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-4</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-5</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-6</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-1</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-2</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-2-1</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-2-2</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-2-3</h3> </div> </div> </div> </a> </li> </ul> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 1-7-3</h3> </div> </div> </div> </a> </li> </ul> </li> </ul> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>Member 2</h3> </div> </div> </div> </a> <ul class="active"> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> </ul> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> </ul> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> <ul> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> <li> <a href="javascript:void(0);"> <div class="member-view-box"> <div class="member-image"> <img src="https://image.flaticon.com/icons/svg/145/145867.svg" alt="Member"> <div class="member-details"> <h3>John Doe</h3> </div> </div> </div> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> |
CSS
.genealogy-scroll::-webkit-scrollbar { width: 5px; height: 8px; } .genealogy-scroll::-webkit-scrollbar-track { border-radius: 10px; background-color: #e4e4e4; } .genealogy-scroll::-webkit-scrollbar-thumb { background: #212121; border-radius: 10px; transition: 0.5s; } .genealogy-scroll::-webkit-scrollbar-thumb:hover { background: #d5b14c; transition: 0.5s; } .genealogy-body{ white-space: nowrap; overflow-y: hidden; padding: 50px; min-height: 500px; padding-top: 10px; } .genealogy-tree ul { padding-top: 20px; position: relative; padding-left: 0px; display: flex; } .genealogy-tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; } .genealogy-tree li::before, .genealogy-tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #ccc; width: 50%; height: 18px; } .genealogy-tree li::after{ right: auto; left: 50%; border-left: 2px solid #ccc; } .genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before { display: none; } .genealogy-tree li:only-child{ padding-top: 0; } .genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{ border: 0 none; } .genealogy-tree li:last-child::before{ border-right: 2px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .genealogy-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; } .genealogy-tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #ccc; width: 0; height: 20px; } .genealogy-tree li a{ text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .genealogy-tree li a:hover+ul li::after, .genealogy-tree li a:hover+ul li::before, .genealogy-tree li a:hover+ul::before, .genealogy-tree li a:hover+ul ul::before{ border-color: #fbba00; } .member-view-box{ padding:0px 20px; text-align: center; border-radius: 4px; position: relative; } .member-image{ width: 60px; position: relative; } .member-image img{ width: 60px; height: 60px; border-radius: 6px; background-color :#000; z-index: 1; } |
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { $('.genealogy-tree ul').hide(); $('.genealogy-tree>ul').show(); $('.genealogy-tree ul.active').show(); $('.genealogy-tree li').on('click', function (e) { var children = $(this).find('> ul'); if (children.is(":visible")) children.hide('fast').removeClass('active'); else children.show('fast').addClass('active'); e.stopPropagation(); }); }); </script> |
See live demo and download source code.
|
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by tohidnateghi. Visit their official repository for more information and follow for future updates.
