Pure CSS Tree menu for blogger

Tree menu is present in every blogger blog in form of archives.   It is a very essential widget for blogs, which helps  the visitors to easily navigate through the blog pages. Have you ever thought of creating of your own tree menu. It expands and contracts when clicked.
I have read many articles by on this but they've all required javascript which increases page load time of  blog.  In this post I am going to explain pure css tree menu without using any javascript.  













This css code credits goes to [CSS]NINJA.

Demo


Step by Step process:


In new blogger interface
1.Login to blogger.


2.Go to Template>>Edit html>>


3.Search for  ]]</b:skin> then paste the following code just above it 

*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h1, h2, h3, h4, h5

{

margin: 0;

padding: 0;

}

body { background-color: #ffffff; color: #606061; margin: 0; }

img { border: none; }

p

{

font-size: 1em;

margin: 0 0 1em 0;

}

html { font-size: 100%; /* IE hack */ }

body { font-size: 1em; /* Sets base font size to 16px */ }

table { font-size: 100%; /* IE hack */ }

input, select, textarea, th, td { font-size: 1em; }

/* CSS Tree menu styles */

ol.tree

{

padding: 0 0 0 30px;

width: 300px;

}

li 

{ 

position: relative; 

margin-left: -15px;

list-style: none;

}

li.file

{

margin-left: -1px !important;

}

li.file a

{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV55vO3Ky06Qv2MxnBQJShBWV5GfcYpHc_w5fIAR5q2y__ifwln7uqwOqL3SB3KDOkGAFA2prvODAidwvVbmbOqk3cS6NdCb1LaynQFvk7QxsdpDurXX_q5jKWDFxSXroFvsCWV40VDT1Z/s1600/document.png) 0 0 no-repeat;

color: #606061;

padding-left: 21px;

text-decoration: none;

display: block;

}

li.file a[href *= '.html'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV55vO3Ky06Qv2MxnBQJShBWV5GfcYpHc_w5fIAR5q2y__ifwln7uqwOqL3SB3KDOkGAFA2prvODAidwvVbmbOqk3cS6NdCb1LaynQFvk7QxsdpDurXX_q5jKWDFxSXroFvsCWV40VDT1Z/s1600/document.png) 0 0 no-repeat; }

li.file a[href *= '.html'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV55vO3Ky06Qv2MxnBQJShBWV5GfcYpHc_w5fIAR5q2y__ifwln7uqwOqL3SB3KDOkGAFA2prvODAidwvVbmbOqk3cS6NdCb1LaynQFvk7QxsdpDurXX_q5jKWDFxSXroFvsCWV40VDT1Z/s1600/document.png) 0 0 no-repeat; }

li.file a[href * = '.html'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV55vO3Ky06Qv2MxnBQJShBWV5GfcYpHc_w5fIAR5q2y__ifwln7uqwOqL3SB3KDOkGAFA2prvODAidwvVbmbOqk3cS6NdCb1LaynQFvk7QxsdpDurXX_q5jKWDFxSXroFvsCWV40VDT1Z/s1600/document.png) 0 0 no-repeat; }

li.file a[href *= '.html'] { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV55vO3Ky06Qv2MxnBQJShBWV5GfcYpHc_w5fIAR5q2y__ifwln7uqwOqL3SB3KDOkGAFA2prvODAidwvVbmbOqk3cS6NdCb1LaynQFvk7QxsdpDurXX_q5jKWDFxSXroFvsCWV40VDT1Z/s1600/document.png) 0 0 no-repeat; }

li input

{

position: absolute;

left: 0;

margin-left: 0;

opacity: 0;

z-index: 2;

cursor: pointer;

height: 1em;

width: 1em;

top: 0;

}

li input + ol

{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi09KfbOtQ-R3HT8G0NlgV3n9S5MuaPUZf3kwU1eBvVm7o3jBGCrcGXXF_ZQ0FrfTLgmhho97pFADSk9yrCHrQKNIDQCKgw8B3FN7SBSMVzYmRHQh0a_X5xOdfoIK58g38lictreQbs_4dn/s1600/toggle-small-expand.png) 40px 0 no-repeat;

margin: -0.938em 0 0 -44px; /* 15px */

xdisplay: block;

height: 1em;

}

li input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }

li label

{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFS0nOeYIAnreuQhwvsuubuWGxfjcSfjwmyFqxv5fhBpu8cgP-tH0UYwKWlfWGHzvv0v__yLtCik3-4viGR8PhzZuf2i_mqMQXGOgEJGmvz-cNG0zAtNRHgsdyzsEuKkbm_9szJ1lK2eb/s1600/folder-horizontal.png) 15px 1px no-repeat;

cursor: pointer;

display: block;

padding-left: 37px;

}

li input:checked + ol

{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjf1fjdG_nnH-E-qXyMacLU2KXm_iLzglZKoOlok5p284UfGI4a20q7pvTMRmjVqeVWgQ9gJGMcU5Vmm0_Ej96gVpP6X3xYArjRCMs2bK66YnShoZS2fue2lbC3IbPeNhiPoNCAFzioLZD/s1600/toggle-small.png) 40px 5px no-repeat;

margin: -1.25em 0 0 -44px; /* 20px */

padding: 1.563em 0 0 80px;

height: auto;

}

li input:checked + ol > li { height: auto; margin: 0 0 0.125em;  /* 2px */}

li input:checked + ol > li:last-child { margin: 0 0 0.063em; }

4.click save

5.Now go to layout>>add a gadget>>Html/Javascript>>
paste the following code

<ol class="tree">

<li>

<label for="folder1">folder1</label> <input type="checkbox" checked disabled id="folder1" /> 

<ol>

<li class="file"><a href="#">File 1</a></li>

<li>

<label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" /> 

<ol>

<li class="file"><a href="#">Filey 1</a></li>

<li>

<label for="subsubfolder1">Subfolder 1</label> <input type="checkbox" id="subsubfolder1" /> 

<ol>

<li class="file"><a href="#">File 1</a></li>

<li>

<label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" /> 

<ol>

<li class="file"><a href="#">Subfile 1</a></li>

<li class="file"><a href="#">Subfile 2</a></li>

<li class="file"><a href="#">Subfile 3</a></li>

<li class="file"><a href="#">Subfile 4</a></li>

<li class="file"><a href="#">Subfile 5</a></li>

<li class="file"><a href="#">Subfile 6</a></li>

</ol>

</li>

</ol>

</li>

<li class="file"><a href="#">File 3</a></li>

<li class="file"><a href="#">File 4</a></li>

<li class="file"><a href="#">File 5</a></li>

<li class="file"><a href="#">File 6</a></li>

</ol>

</li>

</ol>

</li>

<li>

<label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" /> 

<ol>

<li class="file"><a href="">File 1</a></li>

<li>

<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" /> 

<ol>

<li class="file"><a href="#">Subfile 1</a></li>

<li class="file"><a href="#">Subfile 2</a></li>

<li class="file"><a href="#">Subfile 3</a></li>

<li class="file"><a href="#">Subfile 4</a></li>

<li class="file"><a href="#">Subfile 5</a></li>

<li class="file"><a href="#">Subfile 6</a></li>

</ol>

</li>

</ol>

</li>

</ol>

replace #  with your link
 Here i explained only two folders  you can add any number of  folders and subfolders.


Adding folders, subfolders and files


 to create new folder just add  <label for="folder3">Folder 3</label> <input type="checkbox" id="folder3" /> 

 to add sub folder <label for="subfolder3">Subfolder 1</label> <input type="checkbox" id="subfolder3" /> 

 to add another subfolder <label for="subsubfolder3"> subfolder1</label>  <input type="checkbox" id="subsubfolder3" /> 

 to add  a file just add  <li class="file"><a href="#">Subfile 1</a></li> between <ol> </ol>


NOTE:


checked disabled  is used before id in first folder makes folder always open, you can use is it before any folder id to make them always open. Just remove checked disabled   to make it closed.