Create simple left tree menu using jQuery

admin — Sun, 22 Mar 2009 19:20:45 +0000

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

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 “

“. We are just toggling the “display” property of “

block

none

block

none

HTML Code:-

<div class="content">
	<ul id="root" class="menu">
		<li>
			<a href='javascript:void(0);' childid = 'c_12' class='cat_close category'> </a>
			<a href='javascript:void(0);'>Diabeties</a>
		</li>
		<ul id='c_13'>
			<li>
           		<a href='javascript:void(0);' class='product'> </a>
            	<a href='javascript:void(0);'>Skelaxin</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_8' class='cat_close category'> </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'> </a>
            	<a href='javascript:void(0);'>Brufin</a>
            </li>
            <li>
	            <a href='javascript:void(0);' childid = 'c_10' class='cat_close category'> </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'> </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'> </a>
         	   	<a href='javascript:void(0);'>Ultracet</a>
            </li>
            <ul id='c_7'>
            	<li>
            		<a href='javascript:void(0);' class='product'> </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'> </a>
            <a href='javascript:void(0);'>Watson</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'> </a>
            <a href='javascript:void(0);'>Carisoprodol</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'> </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>

A K Chauhan's Blog » left tree menu

Create simple left tree menu using jQuery