Using CSS to realize the effect of family tree (genealogy)

Source: Internet
Author: User
Tags relative

Family Tree (family tree), also known as genealogy, is used to record the relationship between lineage and generation. This article unifies the example, does not use any JS script, uses the pure CSS to create a beautiful family tree (genealogy), also may apply the Enterprise organization chart.

Html
We use Div#tree to include the entire genealogy structure, internally with UL and Li elements to build the data source. The actual development of these genealogy data sources can be read from the database, just like to get an infinite level of the category list, the following is the main HTML structure.

<div class= "Tree" >
<ul>
<li>
<a href= "#" >Parent</a>
<ul>
<li>
<a href= "#" >Child</a>
<ul>
<li><a href= "#" >grand child</a></li>
</ul>
</li>
<li>
<a href= "#" >Child</a>
<ul>
<li><a href= "#" >grand child</a></li>
<li>
<a href= "#" >grand child</a>
<ul>
<li><a href= "#" >great Grand child</a></li>
<li><a href= "#" >great Grand child</a></li>
<li><a href= "#" >great Grand child</a></li>
</ul>
</li>
<li><a href= "#" >grand child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Css

We use CSS: before,: After two pseudo class content properties to build the connector between the elements, while using the CSS3 to achieve the rounded effect of elements, plus the mouse slide on the hover effect, so that the mouse slide into a tree node element, Related to the descendants of the elements 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'll use:: Before and:: On to draw the connectors*/

. Tree Li::before,. 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 ' top ' of single children*/
. Tree li:only-child{padding-top:0;

/*remove left connector from the
Right connector from last child*/
. Tree Li:first-child::before,. 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'll apply the hover effect 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;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.