Post
Ask Question

Create A Responsive Navigation Menu Using Managed Metadata Navigation In SharePoint Server 2013

Let’s follow this post to create and configure metadata service Applications.

Open SharePoint site

SharePoint
Navigate to site settings -> Navigation -> Under look and feel -> Navigation.

SharePoint

On this page, select Managed Navigation.

SharePoint

Under Managed Navigation Term set -> click Create Termset button.

SharePoint

Now, the site navigation has been created successfully.

Open Term store management tool and it will help you to create the terms and term sets for the managed navigation.

SharePoint

On Publishing navigation, click Create Term.

Subsequently, create all the links, which need to be shown in the page.

  • Home
  • About us
  • Gallery
  • Blog
  • Contact us

These are all the term sets, which we are going to create.

Finally, the created term sets looks, as shown below.

SharePoint

Click Save -> Click OK.

Now, the page looks, as shown below.

SharePoint

Let’s do some work to get branding for the navigation menu and make it responsive

HTML responsive navigation menu looks, as shown below.

Browser View

SharePoint

Mobile View

SharePoint

Step 1

Add the scripts and CSS under siteAssets folder.

SharePoint

Step 2

Open SharePoint designer

Open the site collection -> Navigate to the master page -> Open Seattle. Master -> Edit this file in advanced mode.

Add the necessary scripts and CSS into the master page. 

  1. <link rel="stylesheet" type="text/css" href="../../SiteAssets/menu/bootstrap.min.css" />  
  2. <script type="text/javascript" src="../../SiteAssets/menu/jquery.min.js" />  
  3. <script type="text/javascript" src="../../SiteAssets/menu/bootstrap.min.js" />  

SharePoint

HTML code looks, as shown below.

  1. <nav class="navbar navbar-inverse">  
  2.         <ul class="nav navbar-nav">  
  3.       <li class="active"><a href="#">Home</a></li>  
  4.       <li><a href="#">Page 1</a></li>  
  5.       <li><a href="#">Page 2</a></li>  
  6.       <li><a href="#">Page 3</a></li>  
  7.     </ul>  
  8.   </nav>  

CTRL + find the “aspmenu”

Add nav class tag into top of the Sharepoint delegate tag

The code looks, as shown below.

  1. <nav class="navbar navbar-inverse">  
  2. <SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">  
  3.     <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">  
  4.         <Template_Controls>  
  5.             <asp:SiteMapDataSource  
  6.                 ShowStartingNode="False"  
  7.                 SiteMapProvider="SPNavigationProvider"  
  8.                 id="topSiteMap"  
  9.                 runat="server"  
  10.                 StartingNodeUrl="sid:1002"/>  
  11.         </Template_Controls>  
  12.     </SharePoint:DelegateControl>  
  13.     <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">  
  14.         <SharePoint:AspMenu  
  15.             ID="TopNavigationMenu"  
  16.             Runat="server"  
  17.             EnableViewState="false"  
  18.             DataSourceID="topSiteMap"  
  19.             AccessKey="<%$Resources:wss,navigation_accesskey%>"  
  20.             UseSimpleRendering="true"  
  21.             UseSeparateCss="false"  
  22.             Orientation="Horizontal"  
  23.             StaticDisplayLevels="2"  
  24.             AdjustForShowStartingNode="true"  
  25.             MaximumDynamicDisplayLevels="2"  
  26.             SkipLinkText="" />  
  27.     </asp:ContentPlaceHolder>  
  28. </SharePoint:AjaxDelta>  
  29. </nav>  

End of the <body> tag adds some scripts to override the default ID and class for SharePoint <ul> and <li> elements.

For SharePoint On-Premise, it is given below.

UI id:

$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );

For anonymous user, it is given below.

$( "#zz2_RootAspMenu").attr( "id", "myTopNav" );

For Sharepoint Online, it is given below.

$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );

In my scenario, I am using SharePoint On-Premise.

Add the script tag to override the ul class.

SharePoint

First step is set the custom id for the <ul> tag.

$( "#zz13_RootAspMenu" ).attr( "id", "main-menu" );

Now, inspect and check the <ul> tag id.

SharePoint

Code 

  1. <script type="text/javascript">  
  2.   
  3.     // Replace that pesky automatic ul ID  
  4.     $( "#zz13_RootAspMenu" ).attr( "id", "main-menu" );  // set the replace the id for default sharepoint Id  
  5.           $("#main-menu"). attr("class","nav navbar-nav"); // set the class for <ul> element replacing the system css  
  6.       
  7.          $("#main-menu li").attr("class","");  
  8.          $("#main-menu a").attr("class","");  
  9.        </script>  

 Check-in the masterpage file and refresh the browser. You will be able to see the responsive navigation menu.

SharePoint
SharePoint

Note

It is applicable to all types of navigation. Structural navigation also works well.

Happy learning.


Similar Articles