GOOCODE — Find your code/scripts
Family tree, used to record family lineage multiply generational relationships. In this paper, examples, without the aid of any js script, using pure CSS to create a nice Family tree (genealogy), can also be applied in the corporate organization chart.
HTML
We use div # tree structure to contain the entire genealogy, ul and li elements inside to build a data source. The actual development of these genealogy data sources can be read from the database, like getting an infinite level of classification list, the following are the main html structure.
CSS
We use the css: before,: after two pseudo-class content attributes to build the cable between the elements, while the use of the elements to achieve css3 rounded corners, plus a slide on mouse hover effect, so the mouse slide genealogy of a node element, the element associated with the younger generation will have a hover effect, complete css code is as follows:
.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 #ccc; width: 50%; height: 20px; > .tree li::after{ right: auto; left: 50%; border-left: 1px solid #ccc; > /*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 #ccc; 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 #ccc; width: 0; height: 20px; > .tree li a{ border: 1px solid #ccc; padding: 5px 10px; 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; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; > /*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: #c8e4f8; color: #000; border: 1px solid #94a0b4; > /*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: #94a0b4; > Example Pure CSS Family Tree Markup
There are a number of ways to generate and display hierarchical data in a visually appealing tree-like structure. The best way, of course, is to not have to rely on external libraries, and to deal with pure markup.
I’ve been looking at various solutions, and I’m posting below some pure CSS/HTML markup that I found on stack overflow and modified to show a family-tree like structure like the example picture above.
Specifically, the CSS markup in the test page works by styling nested unordered lists. You can add a new level to the hierarchy of your tree by adding a new unordered list to the
Tree Features
I won’t go into the details of the CSS markup, but it’s completely flexible and under your control to alter as you need since it is pure CSS and does not rely on any external libraries to work.
The tree uses thin 1 pixel thick lines to connect the nodes of the tree along with rounded borders. When you mouse-over a node of the tree, it will highlight the associated sub-nodes, making it easy to see relationships in the tree. It’s also nice that you can start with more than one top parent node.
Then within each tree node (unordered list tag), one or more family members’ information is encapsulated within a div and a span tag. The div can be used to hold two span tags to show father and mother information. Then you can show a blue colored area using a span with the male class or a pink colored area with the female class.
This is obviously just an example of what you can do with this markup. It should be useful for rendering any type of hierarchical data (family trees, employee hierarchies, etc.)
Tree Problems
The main problem that happens is the wrapping that happens if your tree grows to be too wide. The tree then wraps its branches and looks unclear and messy. To deal with this issue, you can add some JavaScript to dynamically set the width of the that hosts the hierarchy. There is no clean way that I’ve found yet that can determine the maximum width that will be needed, so you’ll need to guesstimate the maximum for your JavaScript to use.
The Example Code:
Here is the markup that will render the example family tree shown in the picture at the start of this post.
mmarj / CSS Family Tree.markdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| /*Now the CSS*/ |
| * |
| . tree ul |
| padding-top : 20 px ; position : relative; |
| transition : all 0.5 s ; |
| -webkit-transition : all 0.5 s ; |
| -moz-transition : all 0.5 s ; |
| > |
| . tree li |
| float : left; text-align : center; |
| list-style-type : none; |
| position : relative; |
| padding : 20 px 5 px 0 5 px ; |
| transition : all 0.5 s ; |
| -webkit-transition : all 0.5 s ; |
| -moz-transition : all 0.5 s ; |
| > |
| /*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 : 1 px solid # ccc ; |
| width : 50 % ; height : 20 px ; |
| > |
| . tree li :: after |
| right : auto; left : 50 % ; |
| border-left : 1 px solid # ccc ; |
| > |
| /*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 |
| /*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 : 1 px solid # ccc ; |
| border-radius : 0 5 px 0 0 ; |
| -webkit-border-radius : 0 5 px 0 0 ; |
| -moz-border-radius : 0 5 px 0 0 ; |
| > |
| . tree li : first-child :: after |
| border-radius : 5 px 0 0 0 ; |
| -webkit-border-radius : 5 px 0 0 0 ; |
| -moz-border-radius : 5 px 0 0 0 ; |
| > |
| /*Time to add downward connectors from parents*/ |
| . tree ul ul :: before |
| content : » ; |
| position : absolute; top : 0 ; left : 50 % ; |
| border-left : 1 px solid # ccc ; |
| width : 0 ; height : 20 px ; |
| > |
| . tree li a |
| border : 1 px solid # ccc ; |
| padding : 5 px 10 px ; |
| text-decoration : none; |
| color : # 666 ; |
| font-family : arial , verdana , tahoma; |
| font-size : 11 px ; |
| display : inline-block; |
| border-radius : 5 px ; |
| -webkit-border-radius : 5 px ; |
| -moz-border-radius : 5 px ; |
| transition : all 0.5 s ; |
| -webkit-transition : all 0.5 s ; |
| -moz-transition : all 0.5 s ; |
| > |
| /*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 : # c8e4f8 ; color : # 000 ; border : 1 px solid # 94a0b4 ; |
| > |
| /*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 : # 94a0b4 ; |
| > |
| /*Thats all. I hope you enjoyed it. |
| Thanks :)*/ |