Posts Tagged left tree menu

Create simple left tree menu using jQuery

Posted by admin in JavaScript, jQuery on March 23rd, 2009

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 Comment