Collapsable Submenu


If the number of the links in the left side bar are too many, it is not possible to show all the link in the side bar. A solution to the problem is the collapsable toolbar. Using Collapsable toolbar, you group the links and place them under one head. When you click the head, the submenus collapse or expands something similar to show in the youtube below. 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Collapsable submenu | project | tutorial | example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
</head>

<body>

	<div id="menu">
    	<div id="header_menu">Tutorials</div>
        <div id="inner_menu">
            <div class="submenu" onclick="toggleMenu(this);">
                <div>Software</div>
                <ul>
                    <li><a href='http://www.referencedesigner.com/tutorials/jquery/jq_1.php'>jQuery</a></li>
                    <li><a href='http://referencedesigner.com/tutorials/js/js_1.php'>Javascript</a></li>
                    <li><a href='http://www.referencedesigner.com/tutorials/html/html_1.php'>html</a></li>
                </ul>
            </div>
            <div class="submenu" onclick="toggleMenu(this);">
                <div>Hardware</div>
                <ul>
                    <li><a href='http://www.referencedesigner.com/tutorials/allegro/allegro_page_1.php'>Allegro PCB</a></li>
                    <li><a href='http://www.referencedesigner.com/tutorials/orcad/orcad_01.php'>OrCAD</a></li>
                    <li><a href='http://www.referencedesigner.com/tutorials/hspice/hspice_01.php'>Hspice</a></li>
                    <li><a href='http://www.referencedesigner.com/tutorials/pads/pads_01.php'>PADS PCB</a></li>
                  </ul>
            </div>
            <div class="submenu" onclick="toggleMenu(this);">
                <div>Misc</div>
                <ul>
                    <li><a href='http://www.referencedesigner.com/'>How to cajole a woman</a></li>
                    <li><a href='http://www.referencedesigner.com/tutorials/msp430/msp430_01.php'>MSP430</a></li>
                    
                </ul>
            </div>
        </div>
        <div id="bottom_menu">&nbsp;</div>
    </div>
   
    <style>
		body{
			font-family:Tahoma, Geneva, sans-serif;	
			font-size:13px;
		}
		#menu{
			width:200px;
			height:auto;	
		}
		#inner_menu{
			padding:5px 10px;	
			color:#400;
			border-left:1px solid black;
			border-right:1px solid black;
		}
		.submenu{
			overflow:hidden;	
		}
		.submenu div{
			font-weight:bold;	
			cursor:pointer;
		}
		.submenu ul{
			padding:0px 15px;	
			margin:0px;
		}
		.submenu li{
			list-style:none;	
			cursor:pointer;
		}
		.submenu a:visited, .submenu a:link{
			color:#400;
		}
		.submenu a:hover{
			color:red;
		}
		#header_menu{
			font-weight:bold;
			text-align:center;
			padding:3px 0px;
			border-top-left-radius:10px;
			border-top-right-radius:10px;	
			background-color:black;
			color:white;
		}
		#bottom_menu{
			padding:3px 0px;
			border-bottom-left-radius:10px;
			border-bottom-right-radius:10px;	
			background-color:black;
		}
	</style>
    <script type="text/javascript">
		var originHeight = new Array();
		var statusToggle = new Array();
		var h = $('.submenu div').height();
		
		$(document).ready(function(e) {
            for(i=0; i<$('.submenu').size(); i++){
				originHeight.push($('.submenu:nth-child('+(i+1)+')').height());
				statusToggle.push(true);//open
			}
        });
		
		function toggleMenu(subitem){
			for(i=0; i<$('.submenu').size(); i++)
				if($('.submenu').get(i)==subitem)
				{
					if(statusToggle[i]==true){
						$(subitem).animate({height:h+'px'}, 300);
						statusToggle[i]=false;
					}else{
						$(subitem).animate({height:originHeight[i]+'px'}, 300);
						statusToggle[i]=true;
					}
					return;
				}
		}
	</script>
</body>
</html>


You may like to try this example here.

We will explain a part of this, but you will have to try making changes in the file to understand it.

The When you click on the submenu, it triggers the function toggleMenu. 


<div class="submenu" onclick="toggleMenu(this);">


We have used two arrays to store the height of the sub submenu ( If you are no familiar with the javascript array push method, you may check it here 


originHeight.push($('.submenu:nth-child('+(i+1)+')').height()); <br />
  statusToggle.push(true);//open