Friday, June 1, 2012

Navigation dropdowns in SharePoint 2010 using jQuery

I've been looking for a way to create dynamic top navigation dropdowns in SharePoint 2010.  I'd managed to create the dropdowns but only using fixed code, so if a subsite was created, the code would have to be changed too.

I found a few helpful resources online, but the best for me was http://css-tricks.com/simple-jquery-dropdowns/.  I've included my code below.

SharePoint 2010 master.page

<SharePoint:AspMenu
ID="TopNavigationMenuV4"
EncodeTitle="false"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="2" 
SkipLinkText=""
CssClass="s4-tn"></SharePoint:AspMenu>




jQuery
$(document).ready(function() { 
 //Hide all submenus - this should probably be done in CSS
 $('.menu-horizontal ul ul').hide(); 
 //If a child is selected, I also want the parent to be selected
 $('.menu-horizontal ul ul li.selected').parent().parent().addClass('selected');
 //When the mouse hovers over a parent:
 $('.menu-horizontal ul li').hover(function() {
  //Show the first (and only) child ul, containing a li for each subsite
  $('ul:first',this).show();
 }, function(){
  //Hide the child ul after the mouse has left
  $('ul:first',this).hide();
 });
}); 




CSS

This is all very customised to my SharePoint 2010 environment - the above should work out of the box.