I have been avoiding Jquery for quite some time. I was just turning myself blind to Jquery. Jaquery? What Jquery? :-/
Damn it! I have been spelling jQuery as Jquery. 
I wanted some thing similar to accordion effect. There are tons of JavaScript frameworks offering this but I didnt want myself to be again copying huge/minified file/s and then reading hell lot of documentations figuring out how and why and ….
Phew #:-S
Now following is a snippet of code from my dear Kaddu. Obviously you will need jQuery.
<html> <head><title>Tree</title> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $('.level-1').hide(); $('.top').css('cursor','pointer').bind('click',viewList); }); this.viewList = function (){ var id = $(this).attr('id'); var spId = id.split('_'); $('#ul_'+spId[1]).slideToggle(); } </script> </head> <body> <ul> <li class="top" id="li_1"> 1 <ul class="level-1" id="ul_1"> <li>1.1</li> <ol> <li>1.1.1</li> <li>1.1.2</li> <li>1.1.3</li> </ol> </ul> </li> <li class="top" id="li_2"> 2 <ul class="level-1" id="ul_2"> <li>2.1</li> <ol> <li>2.1.1</li> <li>2.1.2</li> <li>2.1.3</li> </ol> </ul> </li> <li class="top" id="li_3"> 3 <ul class="level-1" id="ul_3"> <li>3.1</li> <ol> <li>3.1.1</li> <li>3.1.2</li> <li>3.1.3</li> </ol> </ul> </li> </ul> </body> </html>
Now, you can change lis to divs to spans to ps or what not. You just need IDs and thats it. You have a sliding menu. 
