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