MegaMenu using SharePoint Global Navigation

I want to display the SharePoint Global Navigation as a megamenu.  I have been investigating this for quite a while and all solutions say to create a list then build navigation from there.  I do not want to build a list as this means having to update the list when new sub-sites are added / deleted - it is not automatic like the global navigation.

Because our site is getting bigger, we want to display the navigation similar to the ones below.  Can you create this in SharePoint using the Global Navigation?  If so, how would you do it (e.g. with CSS) and do you know of any examples?

Below is the SharePoint code we have in our master page and a screenshot of part of our current global navigation.

<asp:ContentPlaceHolder id="PlaceHolderGlobalNav" runat="server">
			<a name="navigation"></a>
			<div id="topnav">	
			
			<PublishingNavigation:PortalSiteMapDataSource
			  ID="siteMapDataSource1"
			  runat="server"
			  EnableViewState="true"
			  SiteMapProvider="GlobalNavigation"
			  StartFromCurrentNode="true"
			  StartingNodeOffset="0"
			  ShowStartingNode="false"
			  TrimNonCurrentTypes="Heading"
			  TreatStartingNodeAsCurrent="true"/>
			
			 <SharePoint:AspMenu
			   ID="GlobalNav"
			   Runat="server"
			   EnableViewState="false"
			   DataSourceID="siteMapDataSource1"
			   AccessKey="3"
			   UseSimpleRendering="true"
			   UseSeparateCss="false"
			   Orientation="Horizontal"
			   StaticDisplayLevels="1"
			   MaximumDynamicDisplayLevels="1" 
			   SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"
			   StaticSubMenuIndent="1" 
			   ItemWrap="true"
			   ToolTip="True"/>
			 
			
			</div> <!--topnav-->
		</asp:ContentPlaceHolder>

Part of global navigation
March 23rd, 2015 9:17pm

Hi,

My suggestion would be to use jQuery to draw your mega menu on the client site.

Based on you code above, your top nav will be found in the element selector with id "topnav". Using jQuery you can grab this selector and find its child ul.root. Loop through the navigation structure and either place this is in a js object, or just go ahead and create your new mega menu div.

Some caveats include making sure that the top nav elements provided by SharePoint and styled in the same way as your new jQuery produced nav thus there will be no flicker when the navigation loads.

Use webs and sub webs to help break up columns within your mega menus.

If you can keep your top level nav elements fixes, you can use their original position to add additional content such as sub menu text / copy.

Use the rest API to get more information on sub webs.

Add a content query web part to the footer of your master page, in a hidden div. This CQWP can request sub web rollup data. Customize your XSLT item style to present sub web or list data in a very easy manner for jQuery to parse.

Or you may want to consider a third party tool.

Free Windows Admin Tool Kit Click here and download it now
April 7th, 2015 1:08am

I'm not a developer so don't know about jQuery or rest API.  I know how to use HTML and CSS, so your reply did not really make sense to me :)

Thanks for your reply anyway. 

I would of thought that Microsoft would make it easier to re-style Global Navigation.

August 5th, 2015 9:17pm

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics