Sariksa Thapa Sariksa Thapa - 4 months ago 19
CSS Question

nested unordered list into treeview?

Is it possible to style a nested ul>li into a treeview like this plugin does?
http://www.easyjstree.com/

I was originally using this plugin, but I am in a situation where I can't use JavaScript/jQuery, but has to be done in CSS. Is this even doable for the following HTML?

<div id="navigator">
<ul>
<li class="isFolder isExpanded">
XYZ CORP HR TIME SELF SERVICE
<ul>
<li class="isFolder isExpanded">
Time
<ul>
<li><a href="#" target="_tab">Create Timecard</a></li>
<li><a href="#" target="_tab">Recent Timecards</a></li>
<li><a href="#" target="_tab">Templates</a></li>
<li><a href="#" target="_tab">Timecard Search</a></li>
</ul>
</li>
</ul>
</li>
<li class="isFolder isExpanded">
XYZ CORP EXP ENTRY
<ul>
<li><a href="#" target="_tab">Expense Home</a></li>
</ul>
</li>
<li class="isFolder isExpanded">
XYZ HR EMP SELF SERVICE
<ul>
<li><a href="#" target="_tab">Accommodation Request</a></li>
<li><a href="#" target="_tab">Additional Personal Information</a></li>
<li><a href="#" target="_tab">All Actions Awaiting Your Attention</a></li>
<li><a href="#" target="_tab">Appraisals</a></li>
</ul>
</li>
</ul>
</div>


Any help or guide would be much much appreciated!!

Answer

Not too hard to do without animations, thanks to the + selector. Unfortunately needs to use ids on the checkboxes for the labels to work. Parent selector when.

If you do want to animate it later, you'll wanna hide via max-height:0; rather than display:none;, and animate the max-height. Downside, that'll impose a max-height. If you wanna fake that animation, stick with display:none; and animate a vertical padding instead, letting the user's eye do the work. Y'know. Standard animation tricks.

ul.asTree {
    list-style-type:none;
    padding:0;
    margin:0;
    text-indent:1em;
}
ul.asTree ul{
    display:none;
    list-style-type:none;
}

ul.asTree li{/*lets us position the label's ::before*/
    position:relative;
}

ul.asTree label{
    cursor:pointer;
}
ul.asTree label:hover{
    box-shadow: 0 0 5px 0 rgba(128,155,200,0.5) inset;
}
ul.asTree label::before{
    content:"\25B7";
    position:absolute;
    left:-1em;
    top:-2px;
}
ul.asTree input:checked + label::before{
    content:"\25E2";
}

ul.asTree input:checked + label + ul{
    display:block;
}
<ul class="asTree">
    <li>item 1</li>
    <li>item 2</li>
    <li>
        <input type="checkbox" hidden id="treeExp_3" />
        <label for="treeExp_3">item 3</label>
        <ul>
            <li>item 3.1</li>
            <li>
                <input type="checkbox" hidden id="treeExp_3_2" />
                <label for="treeExp_3_2">item 3.2</label>
                <ul>
                    <li>item 3.2.1</li>
                    <li>item 3.2.2</li>
                </ul>
            </li>
            <li>item 3.3</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" hidden id="treeExp_4" />
        <label for="treeExp_4">item 4</label>
        <ul>
            <li>item 4.1</li>
            <li>item 4.2</li>
        </ul>
    </li>
</ul>

Alternately available on Dabblet