Create a Simple "Tree Menu" in Blogger

Thursday, July 5, 2012 0 comments

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

Source: http://www.mybloggertricks.com/2011/09/create-simple-menu-in-blogger.html
Share this article :

Post a Comment

 
Copyright © 2012. Blogger Tips For Beginners - All Rights Reserved
The information is compiled from various sources on the internet