Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> CSS3 Treeview No JavaScript


Code Snippet </> Info


Snippet Name: CSS3 Treeview No JavaScript

Description: Easily create a tree menu without using javascript!

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Add as many links as you need. You will need to download the tree icons.png image file below and change the image path to reflect your images folder URL path.

(right click - save as)



Author: Martin Ivanov

Last Modified: 2015-06-30 04:06:30

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library