Create a Simple "Tree Menu" in Blogger

Tree MenuEver wondered to create an expandable Tree menu in a simple one step method? There we have it today! A Tree Menu is different from other navigation menus that we have released so far. It has has branches and sub-branches. You can add links to it or even simple text and hang it on your blog sidebar. It helps to organize data in a hierarchal method. Most often we use tree menus for displaying blog archives. It contains a Expand and Contract Link that collapses and shrinks the tree branches. So lets add this beautiful menu to blogger blogs in easiest possible way.

 

Live Demo

 

 

 

Add Tree Menu To Your Blogs

  1. Go to blogger > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it,

<style>
.treeview ul{
margin: 0px;
padding: 0;
}

.treeview li{
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGh9c0QNoSRO0DtBI7DkAtTQpu31zHneEjYUvO0vvp7h6yaQ42-l4_pvcLpNOlEunT3IYlgUI-EUw8ANYANXfqa2AX1G2d63n7rpWzLk9MqzyxO2zMynGGXHWVumdnubaPWR0BWKAIAQ/s400/list.gif) no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;
}

.treeview li.submenu{
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNN5N8Nr_NF9zxsxT-klvCYILfrDab7KCKByU2BEA1peF1euR1rZkAQC8V4IKNOkkfEVinZM4ue5kJ3gAm-qMyaT_0LwIqR7CldBnnDt5VGMZ4hvbVJF0GhY2-xV1WS-wcX_xcV45ax1k/s400/closed.gif) no-repeat  0px 3px;
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{
display: none;
}

.treeview .submenu ul li{
cursor: default;
}
</style>


<script type="text/javascript" >
var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNN5N8Nr_NF9zxsxT-klvCYILfrDab7KCKByU2BEA1peF1euR1rZkAQC8V4IKNOkkfEVinZM4ue5kJ3gAm-qMyaT_0LwIqR7CldBnnDt5VGMZ4hvbVJF0GhY2-xV1WS-wcX_xcV45ax1k/s400/closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7pmoumshlVoI4-Po6u-s-TajFI3RpSCgpVOcznFb3YiZz7euTBKtK6qhoxIxl9UJrpT6UPbbjQla_ZO_mLE8Jl2YItSfrfSvzA5cfgfuhFDnwBzm2treOt3691Q006D9VZU6RQO_Ax8/s400/open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

</script>

 

 

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<p></p>
<ul id="treemenu1" class="treeview">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>

<li>Folder 1
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>

<li>Folder 2
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li>Folder 2.1
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        </ul>
    </li>
</ul>
</li>

<li><a href="#">Item 4</a></li>
</ul>


<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

 

The yellow part is our concerned code of study:

  • Replace # with Link's URL
  • Replace Item 1, 2 ,3 with your Link Title text
  • To add a new link simple add the following code just above </ul>

<li><a href="#">Item 5</a></li>

  • To create a sub menu then add this code just above </ul>

<li>Main title 
    <ul>
    <li><a href="#">Sub title 1</a></li>
    <li><a href="#">Sub title 2</a></li> 

<li><a href="#">Sub title 3</a></li> 
    </ul>
</li>

Just remember that a link line starts with <li> and ends with </li> tag.

    4.   Save your widget and you are all done!

Visit your blog and see a drop down Tree Menu handing on your sidebar. If you faced any difficulty or if you want any help in creating more menus and sub menus then please do not hesitate to leave your comment. I hope this proves helpful for most of you. Peace out buddies! :)

 

Code by dynamicdrive, Bloggerized by MBT

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

12 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. which template is used here www.egyhacks.net and where can i get it it also send me cute box template i am already subscribed here

    ReplyDelete
  2. Hi,

    looks like a nice code. I'm interested in a code like this, but that has deeper sub links and can have several hundred links in it. Can you help?

    dave (at) ifight (dot) tv

    ReplyDelete
  3. how can i include thumbnails in this menu??

    ReplyDelete
  4. My blog's background is dark.How can i make this menu's background dark.
    www.faadugames.blogspot.com

    ReplyDelete
  5. Thanks for this, just what I was looking for!

    ReplyDelete
  6. i'm having problem with icon., My blog is physicsenotes.blogspot.com my id is a.umarmukthar@msn.com

    ReplyDelete
  7. Before I apply this to my blog, I would like to check something. If I click on a link in the tree (e.g. Sub Item 2.1.2) will the tree remain expanded in the same way once I'm taken to the target page, or will the the tree collapse back to only displaying the main items and folders? I can't tell which way it will work from the live demo... Thanks a million!

    ReplyDelete
  8. Further to my last comment, I ended up trying it and indeed the tree does stay expanded even when you navigate through the links to a new page!! :) Something to do with cookies? Anyway, it's a feature that a lot of scripts for tree menus don't carry, and I'm grateful for it! Thanks again!

    ReplyDelete
  9. miracle tutorial..., thanks. God bless you

    ReplyDelete
  10. Thank you very much brother... It's been a long time for me to find the appropriate and simple tutorial to make tree menu for my web. Once again bro, I could say: "You really help me right now"

    My warmest regards,
    Belajar Bahasa Inggris Online

    ReplyDelete