A tutorial on how to implement tree structure with pure CSS

This article mainly introduces the pure CSS implementation of the tree structure of the sample code, the use of CSS and HTML can be a multi-level unordered list of nodes to show a tree structure, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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; }