Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>CSS3 Treeview No JavaScript by Martin Ivanov</title>
<style>
/* Begin CSS3 Treeview. No JavaScript by Martin Ivanov */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Martin Ivanov : http://wemakesites.net : Creative Commons License == */
/*
* This solution works with all modern browsers and Internet Explorer 9+.
* If you are interested in purchasing a JavaScript enabler for IE8
* for the CSS3 Treeview, please, check this link:
* http://experiments.wemakesites.net/miscellaneous/acidjs-css3-treeview/
*/
.css-treeview ul,.css-treeview li{padding:0;margin:0;list-style:none;}
.css-treeview input{position:absolute;opacity:0;}
.css-treeview{font:normal 11px "Segoe UI", Arial, Sans-serif;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
.css-treeview a{color:#00f;text-decoration: none;}
.css-treeview a:hover{text-decoration:underline;}
.css-treeview input + label + ul{margin:0 0 0 22px;}
.css-treeview input ~ ul{display:none;}
.css-treeview label,.css-treeview label::before{cursor:pointer;}
.css-treeview input:disabled + label{cursor:default;opacity:.6;}
.css-treeview input:checked:not(:disabled) ~ ul{display:block;}
.css-treeview label,.css-treeview label::before{background:url("images/icons.png") no-repeat;}
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{display:inline-block;height:16px;line-height:16px;vertical-align:middle;}
.css-treeview label{background-position:18px 0;}
.css-treeview label::before{content:"";width:16px;margin:0 22px 0 0;vertical-align:middle;background-position:0 -32px;}
.css-treeview input:checked + label::before{background-position:0 -16px;}
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.css-treeview
{-webkit-animation:webkit-adjacent-element-selector-bugfix infinite 1s;
}
@-webkit-keyframes webkit-adjacent-element-selector-bugfix
{from
{ padding:0;
}
to
{padding:0;}
}
}
</style>

<style>
/* not part of the code below */
body{font-family:arial, verdana, tahoma;color:#000;background-color:#ffffff;}
.notes{font-family:arial, verdana, tahoma;color:#000;text-align:center;}
</style>

</head>
<body>

<h1>CSS3 Treeview. No JavaScript by Martin Ivanov</h1>
<p>Love it? Please, <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS" target="_blank">donate</a>!</p>
<p>This solution works with all modern browsers and Internet Explorer 9+.</p>
<p>If you are interested in <a href="http://experiments.wemakesites.net/miscellaneous/acidjs-css3-treeview/" target="_blank">purchasing</a> a JavaScript enabler for IE8 for the
CSS3 Treeview, please, <a href="http://experiments.wemakesites.net/miscellaneous/acidjs-css3-treeview/" target="_blank">click here</a>.</p>

<div class="css-treeview">
<ul>
<li><input type="checkbox" id="item-0" /><label for="item-0">This Folder is Closed By Default</label>
<ul>
<li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Ooops! A Nested Folder</label>
<ul>
<li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Look Ma - No Hands!</label>
<ul>
<li><a href="#">First Nested Item</a></li>
<li><a href="#">Second Nested Item</a></li>
<li><a href="#">Third Nested Item</a></li>
<li><a href="#">Fourth Nested Item</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Yet Another One</label>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled Nested Items</label>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">This One is Open by Default...</label>
<ul>
<li><input type="checkbox" id="item-1-0" /><label for="item-1-0">And Contains More Nested Items...</label>
<ul>
<li><a href="#">Look Ma - No Hands</a></li>
<li><a href="#">Another Item</a></li>
<li><a href="#">And Yet Another</a></li>
</ul>
</li>
<li><a href="http://wemakesites.net">Martin Ivanov Website</a></li>
<li><a href="https://snapbuildercartoons.com">Mascots & Logos</a></li>
<li><a href="http://snapbuilder.net">Cloud Hosting Plans</a></li>
<li><a href="http://snapbuilder.com">Webmaster Resources</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2" /><label for="item-2">Can You Believe...</label>
<ul>
<li><input type="checkbox" id="item-2-0" /><label for="item-2-0">That This Treeview...</label>
<ul>
<li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Does Not Use Any JavaScript...</label>
<ul>
<li><a href="#">But Relies Only</a></li>
<li><a href="#">On the Power</a></li>
<li><a href="#">Of CSS3</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-1" /><label for="item-2-1">This is a Folder With...</label>
<ul>
<li><a href="#">Some Nested Items...</a></li>
<li><a href="#">Some Nested Items...</a></li>
<li><a href="#">Some Nested Items...</a></li>
<li><a href="#">Some Nested Items...</a></li>
<li><a href="#">Some Nested Items...</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled Nested Items</label>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<br /><br />
<div class="notes">Click the tree icons above to preview the effect.</div>

<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_256.html">CSS3 Treeview No JavaScript Code Snippet</a> page. ]
</div>

</body>
</html>