Accordion style quick launch on sharepoint 2010

Details

Sunday, 19 June 2011 21:28

Recently I used JQuery to turn the sharepoint quicklaunch left menu of a custom page template into an accordion style menu. Below is the basic code and steps I used to achieve the result.

Although this should work with most versions of JQuery, for the examples below I will assume you have jquery 1.4.2 and jquery-ui 1.8.13 already loading as part of the sites javascript. Also I will assume you want to alter the quick launch menu as part of a page template instead of a master page. The process for a master page should be pretty much the same however.

First up open your custom page template to "edit in advanced mode" in Sharepoint designer 2010.

Look for the code for the quick launch menu. It should look fairly similar to the code below.

<div id="s4-leftpanel" class="s4-notdlg"> 			
    		
</div>

As we can see the left pmenu in this template is surrounded by the div "s4-leftpanel". We need to remember this later.

Just prior to the left menu is where we will add our custom code to modify the left menu.

The first code we will add is a new DIV tag to hold our new version of the menu

 
<div id="leftnav"></div>

Below is the javascript code we add in with comments to explain what each part is doing.

<script type="text/javascript">
$(document).ready(function()
{		
	var sStrayPages = "";
	var bStrayPages = false;
	var sStrayPagesTitle = "Pages & sites";

	// loop over the lower level LI elements.
	// If they are headings with children then add them as such
	$("div.s4-ql div.menu-vertical > ul.root > li.static").each(function()
	{		
		// Does this have children UL elements
		if($(this).children("ul").size() > 0){
			// Add the heading
			$("#leftnav").append("
" + $("span.menu-item-text", this).html() + "
");
			//And add its content as the content part of the accordian
			$(this).children("ul").each(function(){		
				$("#leftnav").append("
" + $(this).html() + "
");
			});		
		} else {
			//If it is a link without a heading then add it to our "Stray pages list"
			bStrayPages = true;
			sStrayPages = sStrayPages  + "
"+$("span.menu-item-text", this).html()+"
" ;
		}			
	});
	
	//If there are stray pages, add them to the accordion
	if(bStrayPages){
		$("#leftnav").append("
"+sStrayPagesTitle+"
");
		$("#leftnav").append("
" + sStrayPages + "
");
	}

	//hide the old menu from the page
	$("#s4-leftpanel").hide();
	//Add the new accordion menu
	$("#leftnav").accordion();
	
});
</script>

Save your custom template and reload it on a test page. You should now have a basic accordion style quicklaunch menu. You can add add additional styling to you template to make it match your overall theme but this should get you started.