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.
No comments:
Post a Comment