Pure CSS for tree-shaped structure

This time to bring you a pure CSS to implement the tree structure, pure CSS to achieve the tree structure of the attention of the matter, the following is the actual case, together to see.

In this article, I'll show you how to use CSS and HTML to present a multi-level unordered list of nodes as a tree-like structure. Tree structure we have to apply in many projects, such as company organization chart, infinite class classification and so on.

Pure CSS Implementation Property structure

CSS implementation of the idea of attribute structure is the use of pseudo-class to achieve the tree structure of the connection line, if you want to realize the click expansion and contraction and check box effect also with JS to achieve. Actually unfolding and shrinking is a click of the element whose child elements are hidden and displayed in the toggle.

HTML structure

    <ul class= "Domtree" >        <li>            Level 1 menu            <ul>                <li>2 level menu </li>                <li>                    Level 2 Menu                    <ul>                        <li>3 level menu </li>                        <li>3 level menu </li>                    </ul>                </li>            </ul>        </li>        <li>            Level 1 menu            <ul>                <li>2 Menu </li>                <li>2 level menu </li>            </ul>        </li>    </ul>

Css

        Ul.domtree,        ul.domtree ul {            margin:0;            padding:0 0 0 2em;        }        Ul.domtree li {            list-style:none;            position:relative;        }        Ul.domtree>li:first-child:before {            Border-style:none none solid none;        }        Ul.domtree Li:before {            position:absolute;            Content: ";            Top: -0.01em;            Left: -0.7em;            width:0.5em;            height:0.615em;            Border-style:none none solid solid;            border-width:0.05em;            Border-color: #aaa;        }        Ul.domtree Li:not (: last-child): after {            position:absolute;            Content: ";            Top:0.7em;            Left: -0.7em;            bottom:0;            Border-style:none none none solid;            border-width:0.05em;            Border-color: #aaa;        }

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using HTML and CSS to implement the Cornell notes

CSS progress bar text is gradient based on progress