Multi level Accordion menu?

From the url example there is only only 2 levels to the left vertical  menu at http://www.labctsi.org/index.php/cct/index_Test.  Is there a way to make the "Committee" as the root menu and make this into a 3 level menu?  Thank you.
The example is from this url.  http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html
lapuccaAsked:
Who is Participating?
 
remorinaConnect With a Mentor Commented:
Hi lapucca,
Although I'm more interested in CSS and HTML zones, I've created the third level for your menu

Try to update the code in your javacsript function, menu html and css as mentioned below

You now have a third level under the links "Advisory Committee" and "Meeting Minutes"

And of course you can adjust the css as you prefer

Cheers
// Modify the script in the top of your document as below //
<script type="text/javascript"> 
	$(document).ready(function() {
        $("ul.sf-menu").supersubs({ 
            minWidth:    8,   // minimum width of sub-menus in em units 
            maxWidth:    25,   // maximum width of sub-menus in em units 
            extraWidth:  0     // extra width can ensure lines don't sometimes turn over 
                               // due to slight rounding differences and font-family 
        }).superfish();
		
		//slides the element with class "menu_body" when mouse is over the paragraph
		$("#committeeMenu p").mouseover(function()
		{	
           $(this).css({backgroundImage:"/media/images/url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
		   $(this).siblings().css({backgroundImage:"/media/images/url(left.png)"});
		});		
		$("#committeeMenu a.level2a").mouseover(function()
		{	
           $(this).css({backgroundImage:"/media/images/url(down.png)"}).next("div.level2d").slideDown(500).siblings("div.level2d").slideUp("slow");
		   $(this).siblings().css({backgroundImage:"/media/images/url(left.png)"});
		});		
    });
	</script>




// Modify the menu html as below //
<div id="committeeMenu" class="menu_list">
						<p style="" class="menu_head"><a href="#">Center Advisory</a></p>
							<div style="display: block;" class="menu_body">
								<a class="level2a" href="http://www.labctsi.org/index.php/cct/community_advisory_committee/">Advisory Committee</a>
								<div class="level2d">
							        <a href="#"">test 1</a>
							        <a href="#"">test 2</a>
							    </div>
								<a class="level2a" href="#">Meeting Minutes</a>
								<div class="level2d">
							        <ul class="level2">
							            <li><a href="#"">test 1</a></li>
							            <li><a href="#"">test 2</a></li>
							        </ul>
							    </div>
							</div>
						<p style="" class="menu_head"><a href="#">Community Health</a></p>
							<div style="display: none;" class="menu_body">							
								<a href="http://www.labctsi.org/index.php/cct/community_health_providers/">Care Providers</a>
								<a href="#/">Meeting Minutes</a>								
							</div>
						<p style="" class="menu_head"><a href="#">Community Leadership</a></p>
							<div style="display: none;" class="menu_body">										
								<a href="http://www.labctsi.org/index.php/cct/community_leadership_council/">Leadership Council</a>
								<a href="#">Meeting Minutes</a>								
							</div>
					</div>



// In your accordionMenu.css file add the below css classes at the end of the file //
.level2d {display:none;}
.level2d ul li {font:normal 8px "Lucida Grande",Tahoma,Arial,Verdana,sans-serif;color:#000;}
.level2d ul li a {width:102px;}

Open in new window

0
 
lapuccaAuthor Commented:
That is great!  Thank you.
0
All Courses

From novice to tech pro — start learning today.