Create simple left tree menu using jQuery

We can easily create left tree menus for our website. Left tree menus provide easy navigation to our website and our website look more organized.

Left Tree Menu Image

Left Tree Menu Image

You can view the working demo here.

You can download the source code here.

In tree menu each item is called node. A node further can have child nodes. We used unordered list for menus “<ul></ul>“. We are just toggling the “display” property of “<ul>” from “block” to “none” and “none” to “block” when user click on it. The “block” will expand the menu and “none” collapsed it.

HTML Code:-

<div class="content">
	<ul id="root" class="menu">
		<li>
			<a href='javascript:void(0);' childid = 'c_12' class='cat_close category'>&nbsp;</a>
			<a href='javascript:void(0);'>Diabeties</a>
		</li>
		<ul id='c_13'>
			<li>
           		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            	<a href='javascript:void(0);'>Skelaxin</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_8' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Pain Killers</a>
        </li>
        <ul id='c_8'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_11' class='cat_close category'>&nbsp;</a>
            	<a href='javascript:void(0);'>Brufin</a>
            </li>
            <li>
	            <a href='javascript:void(0);' childid = 'c_10' class='cat_close category'>&nbsp;</a>
    	        <a href='javascript:void(0);'>D Cold Plus</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_5' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Ultracet</a>
        </li>
        <ul id='c_5'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_7' class='cat_close category'>&nbsp;</a>
         	   	<a href='javascript:void(0);'>Ultracet</a>
            </li>
            <ul id='c_7'>
            	<li>
            		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            		<a href='javascript:void(0);'>Generic Ultracet</a>
            	</li>
            </ul>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_3' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Watson</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Carisoprodol</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Levitra</a>
        </li>
	</ul>
</div>

JavaScript Code:-

<script type="text/javascript">
$(document).ready(function() {
	$("#root ul").each(function() {$(this).css("display", "none");});
	$("#root .category").click(function() {
		var childid = "#" + $(this).attr("childid");
		if ($(childid).css("display") == "none") {$(childid).css("display", "block");}
		else {$(childid).css("display", "none");}
		if ($(this).hasClass("cat_close")) {$(this).removeClass("cat_close").addClass("cat_open");}
		else{$(this).removeClass("cat_open").addClass("cat_close");}
	});
});
</script>

, ,


  1. #1 by Lance - March 3rd, 2010 at 17:01

    Hi Anil,

    This is an excellent mini-tutorial on how to solve a common problem i.e. getting a flexible tree menu working quickly and easily. The example is simple and the code is easy to follow.Thanks a lot !

  2. #2 by Apul Gupta - June 7th, 2010 at 09:24

    Hi AK,

    Very useful script. Thanks for publishing it.

    Apul Gupta

  3. #3 by faiz - December 25th, 2010 at 05:23

    thanks a lot!!
    very useful script that i’ve looking for

  4. #4 by Praba - January 13th, 2011 at 08:06

    @faiz
    I am not able to view the demo. I mean the menu links are not working. What shall i do ?

  5. #5 by Andy - March 4th, 2011 at 22:08

    Thank you for this beautiful script! I’ve been trying to adapt it to use on my website, and am wondering if there is any way to set the initial open/closed status. From the demo, they are all initially closed, can they be set to initially open?

  6. #6 by harishnair - March 19th, 2011 at 15:03

    thanks a lot…… its helped ………….

  7. #7 by valar - June 9th, 2011 at 21:09

    Thanks a lot… Very nice script. And it works well :)

  8. #8 by Rogier - August 18th, 2011 at 20:44

    Hi thanks for your script. Too bad it doesn’t work in IE yet. Are you planning on fixing it? Also Andy’s feedback would be a very nice feature! Customizable opening and closing when website is loaded!
    Thanks again,
    Rogier

  9. #9 by michael - November 7th, 2011 at 12:33

    thank you very much it helped me lot

  10. #10 by Neel - December 20th, 2011 at 19:25

    Nice work!!!

  11. #11 by amanda - January 29th, 2012 at 06:10

    nice job.

    just change the first line of js to the following:

    $(“#root ul”).each(function() {$(this).css(“display”, “block”);});

    then it will opened when loading.

    thanks

  12. #12 by Deepthi - April 30th, 2012 at 16:18

    HI,This one is useful,But my requirement is when i click the button on that time i want to display tree menu.

  13. #13 by devi - October 28th, 2013 at 21:09

    thanks a lot.it is very useful.

  14. #14 by akash - November 18th, 2013 at 22:49

    thnx for this post but i want to ask where to put this java script code as i am working on blogger..pls help

  1. No trackbacks yet.

Comments are closed.