Generally to display hierarchy of Data we use a Treeview Control. The major advantages of a Treeview control is it loads data partially as per the event triggered. I mean if you have bulk data to display, Treeview is the best option. While loading data depending upon the user click you can expand the specific node with data. From my experience I can say Compare to Script based Treeview pure CSS Treeview performs faster during operation.
In this demo app I Created a expandable and collapsible Treeview using pure CSS and HTML5. It’s simple and can easily Customizable according to your project requirement. To develop this Treeview in my HTML page I am using Order list (OL). Where each li contains nodes as File or Folder. Refer my CSS structure here li presents a Folder. If a li is with the CSS Class “each-node” then it re-presents File. To achieve Sub nodes I am using ol element under Folder li.
In CSS for each node I am checking the file extension and showing “page.png” image. If required you can update this to specific image Files. To handle the toggle operation I am applying checked attribute over each checkbox. To prevent Checkboxes from user view I am hiding them using “display: none”. Using the Tree view you can create upto n number of nodes with any depth.
Pure CSS3 Customizable Treeview Example
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="main.css" /> <title>Simple pure CSS Treeview Example</title> </head> <body> <!-- Ordered list For Treeview --> <ol class="tree-demo"> <li> <label for="rootFolder">SEO</label><input type="checkbox" id="rootFolder" /> <ol> <li> <label for="onpageFolder">On-page SEO</label><input type="checkbox" id="onpageFolder" /> <ol> <li class="each-node"><a href="#">Title Optimization</a></li> <li class="each-node"><a href="#">Keywords Optimization</a></li> <li class="each-node"><a href="#">Meta Tag Optimization</a></li> </ol> </li> <li> <label for="offpageFolder">Off-page SEO</label><input type="checkbox" id="offpageFolder" /> <ol> <li class="each-node"><a href="#">Link Building</a></li> <li class="each-node"><a href="#">Social Media Marketing</a></li> <li class="each-node"><a href="#">Forum Posting</a></li> <li class="each-node"><a href="#">Email Marketing</a></li> </ol> </li> <li class="each-node"><a href="#">Others</a></li> </ol> </li> <li class="each-node"><a href="#">Web Design</a></li> <li class="each-node"><a href="#">Graphics Designing</a></li> <li class="each-node"><a href="#">DevOps</a></li> <li class="each-node"><a href="#">Digital Marketing</a></li> <li class="each-node"><a href="#">Pay Per Click program</a></li> <li class="each-node"><a href="#">Domain Registration</a></li> </ol> </body> </html>
main.css
Using this CSS3 Treeview you can use specific icons with your nodes for File. Here in the below sample code I am checking for 4 kinds of Files pdf, html, css and js. In style here I am using Verdana, Helvetica fonts for my treeview. To make the toggle function live in this demo app I am using 2 images Toggle-Expand.png and Toggle-Collapse.png. For demo purpose you can download these images from here.
body, li { background: #424242; color: #FFF; margin: 0; padding: 0; font-family: Verdana, Helvetica; }
img { border: none; }
/* CSS Treeview Styles */
ol.tree-demo { padding: 0 0 0 30px; width: 300px; }
li { position: relative; margin-left: -15px; list-style: none; }
li.each-node { margin-left: -1px !important; }
li.each-node a { background: url(page.png) 0 0 no-repeat; display: block; padding-left: 21px; color: #fff; text-decoration: none; }
/* Checking document type to Show page icon */
li.each-node a[href *= '.pdf'] { background: url(page.png) 0 0 no-repeat; }
li.each-node a[href *= '.html'] { background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.css'] { background: url(page.png) 0 0 no-repeat; }
li.each-node a[href $= '.js'] { background: url(page.png) 0 0 no-repeat; }
li input { position: absolute; left: 0; opacity: 0; margin-left: 0; cursor: pointer; z-index: 2; width: 1em; height: 1em; top: 0; }
li input + ol { background: url(Toggle-Expand.png) 40px 0 no-repeat; height: 1em; margin: -0.938em 0 0 -44px; }
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label { background: rgba(0, 0, 0, 0) url("Folder-Symbol.png") no-repeat scroll 12px 3px; padding-left: 36px; cursor: pointer; display: block; }
li input:checked + ol { background: rgba(0, 0, 0, 0) url("Toggle-Collapse.png") no-repeat scroll 40px 5px; height: auto; margin: -1.25em 0 0 -44px; padding: 1.563em 0 0 80px; }
li input + ol { position: relative; top: -3px; }
li input:checked + ol > li { display: block; margin: 0 0 0.125em; }
li input:checked + ol > li:last-child { margin: 0 0 0.063em; }
In the above CSS Codes I used 1 CSS pseudo-class :last-child.
Required images for Simple Treeview
Here for demo purpose I created the below 4 images. You can use these images in any treeview control.
