nested unordered list into treeview? - html

Question

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>Create Timecard</li>
<li>Recent Timecards</li>
<li>Templates</li>
<li>Timecard Search</li>
</ul>
</li>
</ul>
</li>
<li class="isFolder isExpanded">
XYZ CORP EXP ENTRY
<ul>
<li>Expense Home</li>
</ul>
</li>
<li class="isFolder isExpanded">
XYZ HR EMP SELF SERVICE
<ul>
<li>Accommodation Request</li>
<li>Additional Personal Information</li>
<li>All Actions Awaiting Your Attention</li>
<li>Appraisals</li>
</ul>
</li>
</ul>
</div>
Any help or guide would be much much appreciated!!

Answer 1

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