In this chapter we review common types of navigation a site might incorporate, including horizontal navigation, vertical navigation, footer-based navigation, and social media icon bars. We investigate different options available to us in SharePoint 2013 that can assist us with integrating and managing these different navigation components. With the addition of managed metadata-driven navigation in SharePoint 2013, we can build even more custom, complete navigation structures, still managed by SharePoint, than we could with SharePoint 2010. By the end of the chapter we will have learned how to configure a SharePoint 2013 web site to allow for managed metadata-driven navigation as well as how to modify an HTML master page and other branding elements to include responsive-friendly navigation elements.

We start this chapter with a review of site structure planning and navigation methods available in SharePoint 2013. We continue with a deep dive into term stores and managed metadata. If you are already familiar with managed metadata and term stores, you can skip ahead to the rest of this chapter, specifically the sections “How SharePoint 2013 Builds the Navigation Bar” and “Style and Make the Navigation Bar Responsive.”

Our Scenario

The public Specter Group web site requires multiple forms of navigation including a primary top horizontal navigation bar as well as footer-based navigation. Specter Group wants to leverage the latest tools in SharePoint 2013 to help manage their navigation structure throughout their web site solution. Finally, any navigation component added to the web site must fit within the responsive framework chosen for this project. Navigation must be visible as well as fully functional across multiple devices with different limitations of available features.

Determine Site Structure

A prerequisite to successful site navigation that enables your site visitors to find content relevant to their needs begins with a site map. Your site map is a list of site web pages, sites, and other documents that will be contained in your site. Normally a site map is represented as a hierarchical tree, providing a tree of logically connected branches and nodes, displaying how pages are connected. Once you have an understanding of what pages will exist within a site, you can begin to build a strategy to provide navigation within your site.

Primary Navigation Methods in SharePoint 2013

Before we dive into methods of branding our site navigation, we must begin by investigating available navigation management methods. SharePoint 2013 provides two primary tools that we can use to help manage our site navigation: structured navigation and managed navigation. We can also create custom, possibly nonmanaged navigation methods that include panels, bars, and tool panes we code directly into master pages and page layouts as well as our own .NET navigation providers.

Using the Term Store for Navigation

SharePoint 2010 provided tools to help manage navigation, both global navigation (i.e., the top, horizontal navigation bar) and the current navigation (i.e., the left, vertical navigation bar). We were limited to either having SharePoint manage navigation for us based on the site structure, using structured navigation, or we had to use static navigation based on a list of links, groups, and sublinks. Structured navigation allowed SharePoint to manage navigation based on our site structure but was limiting because it strictly followed how we created the hierarchy of our sites, subsites, and pages. A problem could arise when we needed to create site hierarchies for governance reasons that did not directly relate to how we want navigation structured. If we instead went with static navigation based on a list of links, groups, and sublinks, we had to manually manage our navigation menus and we were limited to only one level of dynamic navigation. Finally, with either method, we were unable to create search engine friendly URLs, such as http://www.spectergroup.com/about instead of http://www.spectergroup.com/pages/aboutus.aspx.

SharePoint 2013 provides a new tool for navigation management that helps solve some of these issues, along with providing us the added functionality of linking to catalogs and catalog categories, by allowing us to use managed metadata and a term store to store and manage our navigation. Additional improvements include the ability to provide SEO-friendly URLs to their actual sites such as our previous example, http://www.spectergroup.com/about.

If the Associated Folder for the term Communities is set to /communities, then whenever a visitor navigates to /communities/spruce-meadows, the term Communities in the navigation bar is highlighted as SharePoint adds the class “selected” to the Communities list item in the rendered HTML.

Term Properties Term-Driven Pages Tab

The Term-Driven Pages tab shown in Figure 6-9 contains properties that allow us to configure what the friendly URL looks like and what page should actually be loaded when a visitor navigates to this friendly URL.

• Configure Friendly URL for this term: By default, the friendly URL will be the term name with spaces replaced by - and other special characters removed. If you would like to customize the friendly URL, select the Customized check box and provide the new friendly URL. In our case we change specter-group to just home. This gives us an absolute URL of http://www.spectergroup.com/home, although we only need to provide “home” in the friendly URL text box.
• Target Page Settings: You can override an existing default target for this term that might have been set by its parent by providing a target page for this term, say /pages/default.aspx for our home page. Remember that the target page must be local to the current site collection. You may also provide a default target for all child terms of this particular term. Child terms can always override this default target on their own Term-Driven Pages tab.
• Category Image: If you would like to associate an image with this term, you can set the location of that image. By default this image will not be displayed in a navigation menu, nor would it be displayed on a particular page associated with this term, but you can reference and display this image using the Term Property Web Part.
• Catalog Item Page settings: The last two settings on this tab provide the targets for pages that are loaded when this term is used as a catalog category. In the case of our global navigation, this is not needed and thus is ignored.

Set a Term Set for Navigation

At this point we have created and configured a metadata service application in our SharePoint 2013 farm to store our term sets. We then created a term set using the Term Store Management Tool within our working site collection. We finally created, configured, and ordered our set of terms that represents the site map we created in Chapter 3. It is now time to modify our site’s navigation properties to use our term set.

1. From your root site in your site collection, navigation to your Site Settings page.
2. In your root site’s Site Settings page, in the Look and Feel section, click Navigation to load your site’s Navigation Settings page.
3. Configure Global Navigation to use Managed Navigation: The navigation items will be represented using a Managed Metadata term set.
4. Once you select the Managed Navigation option, a new section appears lower down on the Navigation Settings page entitled Managed Navigation: Term Set (see Figure 6-12). You should already see your Managed Metadata Service, in our case Specter Managed Metadata. Drill down the settings tree until you see your navigation term set, in our case Specter Global Navigation, found in the Navigation group.

   

   Figure 6-12. Navigation Settings configured to use managed navigation for global navigation

5. Click OK at the bottom of the page to save your settings. Referring to Figure 6-13, notice that the global navigation has been replaced by the terms in our term set.

   

   Figure 6-13. Managed navigation term set used for global navigation

By default, new pages you add to your site after you have configured your site to use managed navigation will automatically be added to your term set and friendly URLs will also be generated. You can modify these settings by clearing the check boxes within the Managed Navigation: Default Page Settings section.

Managing Navigation Quick Edit Mode

An excellent addition to managed navigation includes the ability to managed a navigation bar directly inline, meaning that if you are logged into your site with an account with sufficient permissions, you will see an Edit Links button to the right of (or below) your navigation menu. This gives you the ability to manage your navigation menus without having to return directly to the Term Store Management Tool. Using the inline Edit Links feature, you can show and hide links, rename a link’s display title, reorder links by dragging and dropping them in place, manage submenu links, and even add new links.

If you wish to create a new link with a friendly URL you need to use the Term Store Management Tool. Quick Edit mode does not give you all of the tools associated with the Term Store Management Tool, but it does provide access to many features you might require when quickly updating the navigation. We review the available Quick Edit Mode actions next. Review Figure 6-14 for a visual example.

Share Managed Navigation Across Site Collections

A limitation to managed navigation is that a term set can only be used by one site, unless subsites are configured to use the parent site’s navigation. Primarily this will cause a problem when two or more site collections are supposed to have the same navigation menu. When you attempt to configure a site to use a term set for managed navigation already used by a different site, the error shown in Figure 6-15 will appear.

If you click OK, the first site that was using this term set for managed navigation will no longer display the navigation menu for which the term set was being used.

Fortunately term sets offer a solution. When term sets were first introduced in SharePoint 2010, an option to reuse a term was available. Reusing a term would create a linked term within two term sets. An administrator could then modify a reused term in any term set and all replicated terms would be updated. SharePoint 2013 provides for reusing terms, but it also provides a new option, pinning a term. When you pin a term from one term set to another, the pinned term, in the destination term set, is created as read only. Changes to properties are only allowed at the source term. When used for a term in a term set that is intended for navigation, this holds true, although properties in the Navigation and Term-Driven tabs can be updated in each term and changes are not replicated.

Add the Top Navigation Snippet to a Master Page

Before we can look at the HTML SharePoint generates, we must first add the Top Navigation snippet to our HTML master page. Load Design Manager in a browser, navigate to 4. Edit Master Pages, and click the master page to which you wish to add the Top Navigation snippet. Once the Master Page Preview page loads, click Snippets in the upper right corner.

In the Snippet Gallery, click the Top Navigation icon found in the Navigation section of the ribbon to load the Top Navigation component. As we saw in Chapter 4, we can customize the snippet in the right pane. The HTML we need to add to our master page is located at the bottom left under HTML Snippet. Before we copy the HTML snippet to the clipboard, we need to make a few changes. Refer to Figure 6-17 for an overview of the Top Navigation snippet in the Snippet Gallery and Table 6-2 for explanations of the properties.

• 1.  Under Customization - Top Navigation (AjaxDelta), select Important and set CssClass to ms-core-navigation ms-dialogHidden.
• 2.  Under Customization - Top Navigation (AspMenu), make the following changes:

• a.  Important AdjustForShowStartingNode = True
• b.  Important StaticDisplayLevels = 2
• c.  Appearance CssClass = nav-container
• d.  Behavior MaximumDynamicDisplayLevels = 2
• e.  Layout RenderingMode = List

• 3.  Click Update to update the HTML Snippet window. We can now copy and paste the HTML snippet to our master page.

To add the Top Navigation snippet to our master page, we open our custom master page we added and updated in Chapters 4 and 5 in our web site editor tool. We need to find the location where the Top Navigation snippet should go, so we look for the HTML comment <!--nav snippet-->, and its corresponding end tag, <!--end nav snippet--> (see Listing 6-1).

Listing 6-1.  Original Static Navigation From Master Page

...
<!--nav snippet-->
<ul class="root">
   <li class="current-menu-item"><a href="index.html">HOME</a></li>
   <li><a href="about.html">ABOUT</a></li>
   ...
</ul>
<!--end nav snippet-->
...

We are now ready to replace the HTML in Listing 6-1 with the Top Navigation snippet we just created, which should look like Listing 6-2.

Listing 6-2.  Top Navigation HTML Snippet Added to Our Custom Master Page (Preview HTML and Some Properties Removed for Readiblity)

...
<div class="nav nav-collapse collapse">
   <!--nav snippet-->
   <!--CS: Start Top Navigation Snippet-->
   <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" %>-->
   <!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation"
         CssClass="ms-core-navigation ms-dialogHidden">-->
      <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
      <!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">-->
         <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->...<!--PE: End of READ-ONLY PREVIEW-->
         <!--MS:<Template_Controls>-->
            <!--MS:<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ID="topSiteMap">-->
            <!--ME:</asp:SiteMapDataSource>-->
         <!--ME:</Template_Controls>-->
      <!--ME:</SharePoint:DelegateControl>-->
      <a name="startNavigation"></a>
      <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
         <!--MS: <SharePoint:AspMenu ID="TopNavigationMenu" runat="server" DataSourceID="topSiteMap"
               UseSimpleRendering="true" Orientation="Horizontal" StaticDisplayLevels="2"
               AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2"
               CssClass=" nav-container"> -->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->...
            <!--PE: End of READ-ONLY PREVIEW-->
         <!--ME:</SharePoint:AspMenu>-->
      <!--ME:</asp:ContentPlaceHolder>-->
      <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
   <!--ME:</SharePoint:AjaxDelta>-->
   <!--CE: End Top Navigation Snippet-->
   <!--end nav snippet-->
   <!--used if we want to have a select dropdown for nav on mobile-->
   <div id="nav-select-holder">
   </div>
</div>
...

Save the master page and load your home page in a browser. We are assuming that the custom master page has been set as your site’s Custom Master Page. The top navigation will probably not look correct. We learn how to style our top navigation in the section “Style and Make the Navigation Bar Responsive” later in this chapter. If we open the source view of our home page in the browser and look for the comment <!--nav snippet--> again, we see that the Top Navigation snippet produced the HTML code in Listing 6-3. We have removed IDs as well as other HTML properties or tags that are not important for our understanding of the HTML and each tag’s associated classes or styling.

Listing 6-3.  HTML Produced by SharePoint When Rendering the Top Navigation Snippet

<div class="nav nav-collapse collapse">
   <!--nav snippet-->
   <div id="DeltaTopNavigation" class="ms-core-navigation ms-dialogHidden">
      <a name="startNavigation"></a>
      <div id="" class="nav-container noindex ms-core-listMenu-horizontalBox">
         <ul class="root static">
            <li class="static"><a class="static" href="/home"><span>
                  <span class="menu-item-text">Home</span></span></a></li>
            <li class="static">...<!--Additional top level links-->...</li>
            <li class="static"><a class="static" href="/communities"><span>
               <span class="menu-item-text">Communities</span></span></a>
               <ul class="static">
                  <li class="dynamic"><a class="dynamic" href="/communities/spruce-meadows"><span>
                     <span class="menu-item-text">Spruce Meadows</span></span></a></li>
                  <li class="dynamic">...<!--Additional community links-->...</li>
               </ul>
            </li>
            <li class="static"><a class="static" href="/contact"><span>
               <span class="menu-item-text">Contact</span></span></a></li>
         </ul>
      </div>
   </div>
   <!--end nav snippet-->
</div>

There are a few aspects of this HTML that we want to pay attention to. First, notice how all of our top-level links (Home, Communities, About, etc.) are all within the same <ul> tag. This is a benefit of managed navigation because with structured navigation this is not the case. With structured navigation, Home is the only top-level list item; the other top-level links are actually in a sublist. This can cause branding difficulties that managed navigation helps avert. Refer to Listing 6-4 to see a standard structured navigation menu rendered by SharePoint in the next section.

Also in Listing 6-3, look in the first div with the ID of DeltaTopNavigation. Notice the class value, "ms-core-navigation ms-dialogHidden" is the same that we set in Customization - Top Navigation (AjaxDelta) Important CssClass. Look down to the next div, the div with the ID of "" (i.e. it has no ID). Notice how this class value contains "nav-container", which we set in Customization - Top Navigation (AspMenu) Appearance CssClass. Many snippets might have different properties that can affect specific elements of itself both before and after final rendering to the client browser.

The rendered HTML in Listing 6-3 is much more responsive friendly. Next, notice the containing div has an ID of DeltaTopNavigation. We can use this ID to help style the navigation elements for only this top navigation menu if we do not want to style all unordered lists with a class of ms-core-listMenu-horizontalBox the same. The remaining HTML appears just as it did in SharePoint 2010. Static list items will always have a class static applied to them and list items with dynamic children will also contain the class dynamic-children. A dynamic unordered list will contain the class dynamic as will its child list items and child anchor tags. Using a combination of these classes we can quickly brand the navigation menu as well as make it responsive which we cover in the section “Style and Make the Navigation Bar Responsive” later in this chapter.

Static Levels and Dynamic Levels

Two important settings for how navigation will function include the number of static and dynamic levels you wish to display in a navigation menu. When you create a navigation snippet, either top or vertical, within the Customization - Top Navigation (AspMenu) section, under Important you can set the number of StaticDisplayLevels. Under Behavior you can set the number of MaximumDynamicDisplayLevels. If you consider the hierarchy of links in your navigation structure, you can consider the level of a given link as the distance it is from the top-most level, which starts at 1. In our term set, Home, About, Blog, Community, and Contact are all at level 1 and the three links under Community are at level 2. Our StaticDisplayLevels setting dictates how many static levels to show on the navigation menu, meaning navigation items to always show. The MaximumDynamicDisplayLevels setting thus controls how many levels should be displayed in dynamic menus under our static items.

With managed navigation, this creates a beneficial outcome that we can use to our advantage. In particular in SharePoint 2010 and SharePoint 2013 structured navigation, the home page was always considered the first static level and all of our other top-level links were the second static level of navigation. The catch is that the second static level is an unordered list of list items, but was included in the first level’s first list item. This rendered the HTML in Listing 6-4.

Listing 6-4.  Sample HTML Rendering of Structured Navigation (Certain Tags and Tag Properties Removed for Simplicity)

<div class="nav nav-collapse collapse">
   <!--nav snippet-->
   <div id="DeltaTopNavigation" class="ms-core-navigation ms-dialogHidden">
      <a name="startNavigation"></a>
      <div id="" class="nav-container ms-core-listMenu-horizontalBox">
         <ul class="root static">
            <li class="static"><a class="static">Home</a>
               <ul class="static">
                  <li class="static">...<!--Additional top level links-->...</li>
                  <li class="static"><a class="static">Communities</a>
                     <ul class="static">
                        <li class="dynamic"><a class="dynamic">Spruce Meadows</a></li>
                        <li class="dynamic">...<!--Additional community links-->...</li>
                     </ul>
                  </li>
                  <li class="static"><a class="static">Contact</span></span></a></li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
   <!--end nav snippet-->
   <!--used if we want to have a select dropdown for nav on mobile-->
   <div id="nav-select-holder"></div>
</div>

Having a list and a sublist of items that should all be displayed at the same level can cause a headache in responsive design. We might want to collapse the navigation for smaller devices based on a particular node’s navigation level. We have to somehow handle the fact that the first two levels count as the first level and all additional levels of navigation are displayed one level at a time.

With managed navigation, we can have all static links on one level, thus alleviating many of our initial headaches. The rendered HTML in Listing 6-3 is much easier to style, as all top-level links are in our root unordered list. This also allows us to leverage the Bootstrap framework to make the navigation bar responsive.

Style the Navigation Bar

We saw in Listing 6-3 how SharePoint 2013 renders navigation in HTML. Let us now look at how this looks in a browser and fix any styles that SharePoint might have tweaked (see Figure 6-18).

Here are the known issues: The navigation menu has been dropped down by one pixel. The drop-down arrow rendered by SharePoint for Communities should be hidden or moved to the right. The drop-down menu does not appear correct. The Edit Links font color is incorrect and there are spacing issues in Quick Edit mode. We review each problem and how to fix it. The replacement CSS is provided in Listing 6-5.

Listing 6-5.  CSS Updated to Fix Layout of Top Navigation Snippet Rendered HTML

/*top nav*/
/*center menu*/
nav#topnav .ms-core-listMenu-horizontalBox {
   display: block;
}
/*hide or provide padding for downdown arrow*/
nav#topnav .ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
   padding-right: 20px;
   /*background: transparent none;*/ /*unhide to hide the down arrow*/
}
/*remove border from menu items*/
nav#topnav .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
   border: none;
}
/*correct location of dropdown menu*/
nav#topnav .nav ul.root > li ul {
   border: none;
   top: 54px !important;
}
/*fix height of dropdown menu list items*/
nav#topnav .nav ul.root > li ul li a {
   height: 25px;
}

In Figure 6-19 we see that SharePoint is rendering our links with a class, ms-core-listMenu-horizontalBox. This style, included in corev15.css, includes a border, which although transparent, causes all of our links to be out of line. A hover event also causes the Home icon on the right to not work correctly. We can correct this by overriding the border style to "border: none;".

Figure 6-20 shows that SharePoint adds a span with class dynamic-children for list items with dynamic menus. Normally this would have right padding to provide space for the arrow, but our styles are overriding this, as we removed the padding and margin for all children of unordered lists within nav#topnav .nav. We can either add space for the down arrow or hide the down arrow. In our walkthrough, we will add the right padding back in by providing a more targeted style, nav .navbar .nav .dynamic-children.additional-background.

Figure 6-21 shows us two problems that must be addressed: The drop-down menu placement is incorrect and the drop-down menu itself is not the correct size. As we see highlighted in Figure 6-21, SharePoint provides drop-down functionality that is overriding our menu placement as well as drop-down menu width. We can solve this by overriding nav#topnav .nav ul.root > li > ul as well as children of dynamic menus with nav#topnav .nav ul.root ul.dynamic ul.dynamic.

Using the same technique of using our developer toolbar, we can find the causes of the Edit Links and Quick Edit mode style issues as well. The CSS required to fix these issues is provided in Listing 6-6. In Figure 6-22 we can see the corrected top navigation menu.

Listing 6-6.  CSS Updated to Fix Layout of Top Navigation While in Inline Edit Mode

/*edit links font*/
nav#topnav .nav .ms-metadata {
   font-size: inherit;
   font: inherit;
   color: #fff;
}
/*images within nav should not use respponsive properties*/
nav#topnav .nav img {max-width: none;}
nav#topnav .nav .ms-navedit-hidespan {display: block;}
/*force the edit node text icon into a box*/
nav#topnav .nav a.ms-navedit-hidelink {
   padding: 21px 0px 0px !important;
   margin: 0px !important;
   display: block !important;
   overflow: hidden !important;
   height: 17px !important;
}
/*remove border added to node table*/
nav#topnav .nav .ms-core-listMenuEdit, nav#topnav .nav .ms-core-listMenuEdit:hover {
   border: none;
}
/*edit node text padding*/
nav#topnav .nav .ms-navedit-hiddenAppendArea {
   padding: 20px 10px 10px;
   color: #F3E4C8;
}
/*edit link node text on dynamic menus requires background*/
nav#topnav .nav .dynamic .ms-navedit-deletelinkCell {
   background: #333333 none;
}
/*add a link should float left*/
nav#topnav .nav .ms-navedit-addNewLink {
   display: inline-block !important;
}
/*bump save and cancel buttons down*/
nav#topnav .nav .ms-navedit-editButton {
   margin-top: 20px;
}
nav#topnav .nav .ms-core-listMenu-horizontalBox span.ms-list-addnew-imgSpan16 {
   vertical-align: middle;
   margin-right: 5px;
}
/*reset the first node to not show a home icon, rather text*/
nav#topnav .nav ul.root > li.ms-navedit-dropNode:first-child {
   height: auto;
   padding: 0px;
}
nav#topnav .nav ul.root > li.ms-navedit-dropNode:first-child a {
   background: transparent none;
   height: auto;
   overflow: visible;
   padding: 21px 20px;
   text-indent: 0;
   white-space: nowrap;
   width: auto;
}
/*end quick edit mode*/

Make the Navigation Bar Responsive

The general problem we are attempting to solve when making a navigation menu responsive is how our navigation menu will work on mobile devices or devices that have a smaller viewport. Further, how can we display a complex navigation structure that works well for desktop users as well as mobile users? To compound our problems, we must also consider what functionality is available on any given client, most pertinent to navigation, the hover or mouse-over event. Many tablets and other mobile devices do not include the ability to react to a hover action so our navigation must take this into account. By default, the top navigation bar SharePoint generates for us depends on a hover event for a drop- down menu to appear and we must handle this first. After we see how we can trap the hover/mouse-over event, we will cover three methods of making a navigation bar responsive with their pros and cons: floating navigation, drop-down navigation, and collapsing navigation.

jQuery(document).ready(function($) {
   BindTopNav($);
});
function BindTopNav($) {
   /*grab top nav SP generated list*/
   var u = $('#topnav ul.root'),
   if (u.length > 0) {
      /*loop through every nav item that has dynamic children*/
      u.find('a.dynamic-children').each(function() {
         /*get current link parent li and first child span*/
         var l = $(this).parent('li'),
         var s = $(this).children('span').eq(0);
         /*override parent li hover event to show dropdown*/
         l.hover(
            function () {HoverTopNav($, $(this),''),},
            function () {HoverTopNav($, $(this),'o'),}
         );
         /*trap link click*/
         $(this).bind('click',function(e) {
            /*do math to determine if click was the link text, or the dropdown arrow*/
            var w = $(this).outerWidth(true);
            var s = $(this).children('span').eq(0);
            var rs = parseInt($(this).css("padding-right")) + parseInt($(this).css("margin-right")) +
                  parseInt(s.css("padding-right")) + parseInt(s.css("margin-right"));
            var x = e.pageX - $(this).offset().left;
            if (x > (w-rs))
               DropTopNav($, $(this));
            else
               return true;
            return false;
         });
         /*need to trap link span too for some browsers*/
         s.bind('click',function(e) {
            /*do similar math to determine if click was link text or arrow*/
            var w = $(this).outerWidth(true);
            var rs = parseInt($(this).css("padding-right")) + parseInt($(this).css("margin-right"));
            var x = e.pageX - $(this).offset().left;
            if (x > (w-rs))
               DropTopNav($, $(this).parent('a').eq(0));
            else
               window.location.href = $(this).parent('a').eq(0).attr('href'),
            return false;
         });
      });
   }
}

/*triggered when a nav link is hovered*/
function HoverTopNav($, l, a) {
   if (l.length > 0) {
      var m = $('.navbar .btn-navbar-close'),
      if (m.length > 0) {
         /*only down dropdown on hover if not mobile nav view*/
         if (m.css('display') != 'inline-block')
            DropTopNav($, l.children('a.dynamic-children').eq(0), a);
      }
   }
}

/*triggered when a nav link is clicked*/
function DropTopNav($, l, a) {
   if (l.length > 0) {
      var u = l.siblings('ul').eq(0);
      if (u.length > 0) {
         /*if the sub menu is hidden, then show or vice-versa*/
         if (l.hasClass('selected') || (a=='o')) {
            u.css('display','none'),
            l.removeClass('selected'),
            u.find('ul.dynamic').css('display','none'),
            u.find('a.dynamic-children').removeClass('selected'),
         }
         else {
            u.css('display','block'),
            l.addClass('selected'),
         }
      }
   }
}

<div class="nav">
  <!--nav snippet-->
  <!--CS: Start Top Navigation Snippet-->
  ...
  <!--CE: End Top Navigation Snippet-->
  <!--end nav snippet-->
</div>

/*floating navigation*/
/*top level nav container show no long float and should have grow in height as needed*/
nav#topnav {
   height: auto;
}
/*require that each menu item display inline*/
nav#topnav .nav ul.root > li {
   display: inline-block;
   border: none;
}
/*remove any border so we do not have hanging borders*/
nav#topnav .nav ul.root > li a {
   border: none;
}
/*end floating navigation*/

<nav id="topnav">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <div class="nav nav-select">
          <!--nav snippet-->
          <!--CS: Start Top Navigation Snippet-->
          ...
          <!--CE: End Top Navigation Snippet-->
          <!--end nav snippet-->
          <div id="nav-select-holder">
          </div>

        </div>
      </div>
    </div>
  </div>
</nav>

// Responsive Combo Navi - Alternative, only execute if select element container exists
if ($("#nav-select-holder").length > 0) {
   // Create the drop-down base
   $("<select id='comboNav' />").appendTo("#nav-select-holder");
   // Create default option "Navigation"
   $("<option />", {
      "selected": "selected",
      "value"   : "",
      "text"    : "Navigation"
   }).appendTo("#nav-select-holder select");
         
   // Populate drop-down with menu items
   $("#topnav .nav li a.menu-item").each(function() {
      var el = $(this);
      var lev = el.parents('ul').length;
                 
      $("<option />", {
         "value"   : el.attr("href"),
          "text"    :  (lev < 2) ? el.text(): '|-- ' + el.text(),
         "style"   : 'padding-left: ' + ((lev-1) * 10) + 'px'
      }).appendTo("#nav-select-holder select");
   });
   $("#comboNav").change(function() {
      location = this.options[this.selectedIndex].value;
   });
}

/*topnav mobile drop-down fixes */
/*hide the select menu for default viewports*/
nav#topnav #nav-select-holder {
   display: none;
}
/*use Media Query to apply additional styling for smaller viewports*/
@media (max-width: 979px) {
   /*force the height of the main nav bar*/
   nav#topnav .navbar-inverse .navbar-inner {
      height: 59px;
   }
   /*hide the normal navigation bar*/
   nav#topnav .nav-select ul.root {
      display: none;
   }
   /*display the select navigation container*/
   nav#topnav .nav-select #nav-select-holder  {
      display: block;
      text-align: center;
      padding-top: 10px;
   }
   nav#topnav .nav-select #nav-select-holder  select {
      margin: 5px 0px;
   }
}
/*end topnav mobile drop-down fixes */

<nav id="topnav">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="navbar navbar-inverse">
                    <div class="navbar-inner">
                        <div class="container">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-
                                collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <div class="nav nav-collapse collapse">
                                <!--nav snippet-->
                                <!--CS: Start Top Navigation Snippet-->
                                ...
                                <!--CE: End Top Navigation Snippet-->
                                <!--end nav snippet-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

@media (max-width: 979px) {
   /*allow the top nav container to grow as menu grows*/
   nav#topnav {
      height: auto;
   }
   nav#topnav .navbar-inverse .navbar-inner {
      border: none;
      height: auto;
   }
   nav#topnav .navbar .nav {
      float: none;
      margin: 0px;
   }
   /*remove the right border, add a top border, and have each nav item display one per line*/
   nav#topnav .nav ul.root > li {
      border-right: none;
      border-top: 1px solid #2F2F2F;
      display: block;
      float: none;
      height: auto;
      background: #000 none;
   }
   nav#topnav .nav ul.root > li:first-child, nav#topnav .nav ul.root > li a {
      padding: 15px 20px;
      border-top: none;
   }
   /*for links with dynamic children, provide remove from drop-down arrow*/
   nav .navbar .nav .dynamic-children.additional-background {
      padding-right: 10% !important;
      width: 90%;
      display: block;
      background-image: url('/_layouts/15/images/menu-down.gif'),
   }
   /*turn off any hover event*/
   nav#topnav .nav  ul.root > li:hover > ul, nav#topnav .nav  ul.root ul > li:hover > ul {
      display: none;
   }
   /*do not allow inline editing of links while in mobile view*/
   .ms-core-listMenu-horizontalBox > .ms-core-listMenu-root > .ms-listMenu-editLink {
      display: none !important;
   }
   /*set dynamic menus to not float*/
   nav#topnav .nav ul.root ul.dynamic, nav#topnav .nav ul.root ul.dynamic ul.dynamic {
      float: none !important;
      left: auto !important;
      top: auto !important;
      position: relative !important;
   }
   nav#topnav .nav ul.root > li ul li a {
      padding: 15px 20px;
      border-top: none;
   }
}

Current Navigation

Current navigation in SharePoint 2013 is what we used to call Quick Launch navigation in SharePoint 2010. Current navigation is often a vertical bar or column navigation menu, normally placed on the left or right side of a web page. Current navigation used to be very common on all pages of a web site, including the home page, but current trends are to not include a vertical navigation bar on the home page.

In SharePoint 2013, current navigation can be configured in a similar manner as global navigation by browsing to the Navigation Settings page, found in the Look and Feel section of your Site Settings page. You can configure current navigation to inherit current navigation settings from its parent, managed navigation, and two types of structured navigation (refer to Figure 6-27).

Remember that a site can only link to one term set for managed navigation, meaning that if you intend to have both global and current navigation use managed navigation, you will need to create your terms in your term set carefully and correctly configure your term properties.

As with the Top Navigation snippet, you can find the Vertical Navigation snippet in the master page Snippet Gallery (see Figure 6-28).

As with the Top Navigation snippet, quite a few properties are available for customizing the Vertical Navigation snippet, although the important properties include CssClass, as well as the static and dynamic levels properties. These properties provide similar functionality to the Top Navigation snippet. Once you have configured your snippet, you are ready to copy and paste the generated snippet code to either your master page or your page layouts, even if you wish to only have vertical navigation on specific pages.

Normally the current navigation snippet is added to the master page so that it can be shared across all pages in your site. For collaboration sites this is desirable, but for publishing sites, we might only want vertical navigation on particular page layouts. If you include the vertical navigation in the master page, then your custom page layouts that should not include the vertical navigation will have to hide it somehow. The common method is to use an inline style, but in a responsive framework, this can cause undesirable flickering as well as problems with grid columns. We address how to implement hiding a vertical navigation menu in a page layout in Chapter 7.

Another interesting aspect of the current navigation is the added ability in SharePoint 2013 for Focus on Content. In Figure 6-29 notice the new icon highlighted on the right. If you click this icon on a page using an OOTB master page, the current navigation should be hidden and your content area fills up the remaining space. Click the icon again and your current navigation should reappear. This “magic” is performed by SharePoint with the simple addition of the class ms-fullscreenmode added to the main <body> tag. You can utilize this OOTB ribbon function and the class added for you to hide and display your custom current navigation as well as other aspects of your site design.

Breadcrumb Navigation

Breadcrumb navigation has been with us for a long time and its inclusion in web sites comes and goes with the trends. Breadcrumbs provide the ability to assist visitors with where they currently are on the site, and in particular how they got there. Breadcrumbs provide a quick representation of where the current page exists in the site structure of the site and where each parent node of the current page is displayed along with a link. See Figure 6-30 for an example of breadcrumb navigation.

The obvious place to go looking for the breadcrumb snippet is the Snippet Gallery, but you will find there is not a breadcrumb snippet readily available. You need to create your own snippet from custom ASP.NET markup. This is an advanced topic that requires some understanding of ASP.NET controls.

To help you get started, you can use code and controls SharePoint provides out of the box. In particular code blocks are already provided in OOTB master pages such as seattle.master found in the /∼catalogs/masterpage library. If you open seattle.master and look for the breadcrumb ASP.NET markup, you will find the ASP.NET code shown in Listing 6-17.

Listing 6-17.  ASP.NET Code From seattle.master That Generates Breadcrumbs

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
   <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
      <SharePoint:SPTitleBreadcrumb
         runat="server"
         RenderCurrentNodeAsLink="true"
         SiteMapProvider="SPContentMapProvider"
         CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">
         <PATHSEPARATORTEMPLATE>
            <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
         </PATHSEPARATORTEMPLATE>
      </SharePoint:SPTitleBreadcrumb>
   </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>

It would be nice if you could copy and paste this directly to our HTML master page, but you cannot because HTML master pages might not include ASP.NET controls. You must first convert this to a snippet.

1. Open the Snippet Gallery for your master page.
2. Click the Custom ASP.NET Markup icon in the ribbon.
3. This will load the Create Snippets From Custom ASP.NET Markup. Paste the ASP.NET code from Listing 6-17 in the text box at the lower right of the page. Click Update to update the HTML Snippet.
4. The HTML Snippet will update with the HTML-friendly code in Listing 6-18. You can now copy and paste this to your HTML master page.
5. You can use these steps to quickly generate a snippet based on any ASP.NET markup.

Listing 6-18.  HTML Snippet Generated by the Snippet Gallery for a Breadcrumb

<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:  <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:    <SharePoint:SPTitleBreadcrumb runat="server" RenderCurrentNodeAsLink="true"
      SiteMapProvider="SPContentMapProvider"
      CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">-->
<!--SPM:      <PATHSEPARATORTEMPLATE>-->
<!--SPM:        <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />-->
<!--SPM:      </PATHSEPARATORTEMPLATE>-->
<!--SPM:    </SharePoint:SPTitleBreadcrumb>-->
<!--SPM:  </asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->

If you add the HTML Snippet in Listing 6-18 to your custom master page, load a page in the browser, and view the source HTML, you will find a breadcrumb similar to Listing 6-19 or Listing 6-20. Notice that the separator image and spans are different between the two listings, as you have to provide special styling for each type of breadcrumb even though they both come from the same SPTitleBreadcrumb control. In particular in Listing 6-19, all breadcrumb nodes are contained within their own span, whereas in Listing 6-20 only the separator image is contained within its own span.

Listing 6-19.  Rendered Breadcrumb Navigation: Type One With Some Properties Removed for Feadability

<span id="DeltaPlaceHolderPageTitleInTitleArea">
   <span>
      <a href="#"><img alt="Skip Navigation Links" /></a>
      <span>
         <a href="/_catalogs/masterpage/Forms/AllItems.aspx">Master Page Gallery</a>
      </span>
      <span>
         <img src="/_layouts/15/images/spcommon.png?rev=23">
      </span>
      <span>
         <a href="/_catalogs/masterpage/Forms/AllItems.aspx">Specter Group</a>
      </span>
      <a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
   </span>
</span>

The HTML provided in Listing 6-20 will be most commonly found in Site Settings pages, whereas the HTML provided in Listing 6-19 will be common throughout content pages, lists, and libraries.

Listing 6-20.  Rendered Breadcrumb Navigation: Type 2 With Some Properties Removed for Readability

<span id="DeltaPlaceHolderPageTitleInTitleArea">
   <a href="settings.aspx">Site Settings</a>
   <span>
      <span>
         <img src="/_layouts/15/images/spcommon.png?rev=23">
      </span>
   </span>
   Site Master Page Settings
</span>

To add a breadcrumb to the example master page we have been using throughout this chapter to produce the results in Figure 6-30, we must add Listing 6-17 to the master page as well as provide additional styling.

In Listing 6-21, we add the snippet from Listing 6-18 to our master page above our header’s search box.

Listing 6-21.  Add Breadcrumb Snippet to Master Page

<header>
   <!--header container, row, logo, etc. removed-->
   <div class="span4">
      <div class="sp-breadcrumb">
         <!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
         <!--Snippet from Listing 6-18-->
         <!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->
      </div>
      <div class="searchbox">
         <!--search box snippet-->
         <!--end search box snippet-->
      </div>
   </div>
   <!--end header container removed-->
</header>

SharePoint provides OOTB styling for breadcrumbs but we want to ensure that the breadcrumb matches our branding. Listing 6-22 provides additional styles for the breadcrumb navigation. The styles help position the breadcrumb above the search box, modify the text and link colors to match our branding, and finally provide media queries to reshape the breadcrumb depending on the viewport.

Listing 6-22.  Styles for Breadcrumb Navigation

/*target the right span in the header. Allows us to position breadcrumb*/
header .span4 {
   position: relative;
}
/*position the breadcrumb in the header*/
.sp-breadcrumb {
   display: block;
   position: absolute;
   right: 0px;
   top: 30px;
   color: #444;
   white-space: nowrap;
}
/*fix bootstrap image resize issue for seperator image*/
.sp-breadcrumb img {
   max-width: none;
   width: auto;
}
/*change links and text to match branding*/
.sp-breadcrumb a {
   color: #009899;
}
@media (max-width: 979px) {
   /*for tablets, descrease font size and move up with search box*/
   .sp-breadcrumb {
      font-size: 14px;
      top: 24px;
   }
}
@media (max-width: 767px) {
   /*for smaller devices, drop breadcrumb to its own line*/
   .sp-breadcrumb {
      position: relative;
      right: auto;
      top: auto;
      padding: 0px 10px;
   }
}

At this point your breadcrumb should look similar to Figure 6-30, although the separator image will be different. We now provide CSS to make two additional changes. The first modification we will make includes changing the separator image. The second change we will make is we want to hide the navigation for tablet and mobile views based on the Bootstrap model.

<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:  <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:    <SharePoint:SPTitleBreadcrumb runat="server" RenderCurrentNodeAsLink="true"
      SiteMapProvider="SPContentMapProvider"
      class="breadcrumb-separator"
      CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">-->
<!--SPM:      <PATHSEPARATORTEMPLATE>-->
<!--SPM:      <asp:Image id="BCSeperator" runat="server" GenerateEmptyAlternateText="true"
                        ImageUrl="/_catalogs/masterpage/img/breadcrumb-separator.png" />-->

<!--SPM:      </PATHSEPARATORTEMPLATE>-->
<!--SPM:    </SharePoint:SPTitleBreadcrumb>-->
<!--SPM:  </asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->

/*separator image*/
/*hide the OOTB separator image*/
#DeltaPlaceHolderPageTitleInTitleArea > span > span img{
   display: none;
}
/*a second-level span should only contain the separator, so provide our image*/
#DeltaPlaceHolderPageTitleInTitleArea > span > span {
   background: transparent url('../img/breadcrumb-separator.png') no-repeat 0 6px;
   margin: 0px 0px 0px 5px;
   width: 8px;
   height: 17px;
   display: inline-block;
}

/*if breadcrumb-separator container exists, we have to provide different styles*/
/*display, move image out of the way and provide a new background that uses our separator image*/
#DeltaPlaceHolderPageTitleInTitleArea > span.breadcrumb-separator > span img{
   text-indent: -9999px;
   overflow: hidden;
   background: transparent url('../img/breadcrumb-separator.png')
      no-repeat 0 6px;
   margin: 0px 5px;
   width: 8px !important;
   height: 17px !important;
   display: inline-block !important;
}
/*second-level span may include text or separator, so we need to reset its styles*/
#DeltaPlaceHolderPageTitleInTitleArea > span:first-child > span,
#DeltaPlaceHolderPageTitleInTitleArea > span.breadcrumb-separator > span {
   background: transparent none;
   margin: 0px;
   width: auto;
   height: auto;
   display: inline;
}

<style>
@media (max-width:979px) {
   #DeltaPlaceHolderPageTitleInTitleArea {
      display: none;
   }
}
</style>

Summary

In this chapter we reviewed the new navigation structure provided in SharePoint 2013, that being metadata-driven navigation. This huge improvement over previous versions of SharePoint provides outstanding ability to modify and maintain a site’s navigation as well as share a navigation structure across multiple site collections. Once the managed metadata store is configured in the farm, a term set can be quickly created, utilized, and even customized in line with browser-based tools.

We then looked at the top navigation snippet, added this to a HTML master page and saw common methods of styling a SharePoint navigation menu. We reviewed how to make a horizontal navigation bar responsive as well as considered caveats for different methods. We finished with a look at additional forms of web site navigation, including vertical navigation, a breadcrumb, footer navigation, and a social toolbar.