<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
	$("#firstpane p.menu_head").click(function()
    {
		$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(left.png)"});
	});
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondpane p.menu_head").mouseover(function()
    {
	     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
	});
});
</script>


<div class="left-nav-container">
    <div class="base-mini">
		<div class="head">
			<h4><?php echo $this->__('Category') ?></h4>
		</div>
		<div class="middle_box">
			<ul id="left-nav">
				<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
				<?php if($_menu): ?>
						<?php echo $_menu ?>
				<?php endif ?>
			</ul>
		</div>	
    </div>
	<div class="bottom_box"><span></span></div>
</div>

