Custom Managed Navigation in SharePoint 2013

Reqiurement:

Implement in detail

1. Create http handle service to provide the term store data for client

a. Retrieve the term store using Server API, at the moment, it would improve the performance using Http context cache

public static  class CacheNavigation
{
const string AudienceGroupListCacheKey = "CacheKey";
const string SessionNavigationKey = "navigationKey_";
const int CacheExpritaionTimeInSeconds = 60; // 10 minutes
const string LogFeatureName = "CacheNavigation";

public class NavigationItem
{
public string Title { get; set; }
public string Url { get; set; }
public string Description { get; set; }
public string ParentNode { get; set; }
public Boolean HasChildNodes { get; set; }

public NavigationItem(string title, string url, string description, string parentNode, Boolean hasChildNodes)
{
Url = url;
Title = title;
Description = description;
ParentNode = parentNode;
HasChildNodes = hasChildNodes;
}
}

public static List<NavigationItem> GetTerms()
{
List<NavigationItem> groups = new List<NavigationItem>();
groups = HttpContext.Current.Cache[AudienceGroupListCacheKey] as List<NavigationItem>;
if (groups == null) {
groups = new List<NavigationItem>();
SiteMapNode rootNode = SiteMap.Providers["GlobalNavigationTaxonomyProvider"].RootNode;
if (rootNode != null)
{
foreach (SiteMapNode term in rootNode.GetAllNodes())
{
groups.Add(new NavigationItem(term.Title, term.Url, term.Description, term.ParentNode.Title, term.HasChildNodes));
}
}
HttpContext.Current.Cache.Insert(AudienceGroupListCacheKey, groups, null, DateTime.Now.AddSeconds(CacheExpritaionTimeInSeconds), TimeSpan.Zero);
}
return groups;
}
}

b. Create a handle

public class GetNavigation : IHttpHandler
{
public bool IsReusable
{
get { return true; }
}
/// <summary>
/// Return json-serialized Dictionary url --> ToHide
/// </summary> to
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
if (context == null || context.Response == null)
{
throw new ArgumentNullException("context", "context can not be null");
}

JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
context.Response.ContentType = "application/json";
var jsonResult = new JsonResult();

var currentuserNavigation = CacheNavigation.GetTerms();
jsonResult.Data.Add(currentuserNavigation);
context.Response.Write(jsonSerializer.Serialize(jsonResult));
}
}

2. Call the hande to get the navigation data and general html layout

a. Call the handle to get data

Function.registerNamespace('StorePortal.GlobalNavigation');
<span style="font-family:Consolas;font-size:12px;"><span style="font-family:Consolas;font-size:12px;"></span></span><p>termNavigation = { $_index: [] };</p><p>// call handle service, and return json data
StorePortal.GlobalNavigation.GetNavigationJson = function() {
$.ajax({
url: _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/../GetNavigation.ashx",
type: "get",
dataType: "json",
success: function (result) {
StorePortal.GlobalNavigation.GetNavigationData(result.Data[0]);
}
});
}</p>

b. Save the json object into Array

// retrieve json datan and convert it to array
StorePortal.GlobalNavigation.GetNavigationData = function(result) {
$.each(result, function (index, key) {
console.log(this.Title);
var title = this.Title;
var url = this.Url;
var parentNode = this.ParentNode;
if (parentNode == "Store Portal") {
termNavigation.$_index.push(title);
termNavigation[title] = { Title: title, Url: url };
termNavigation[title].children = { $_index: [] };
}
else if (termNavigation[parentNode]) {
var subTermNavigation = termNavigation[parentNode];
subTermNavigation.children.$_index.push(title);
subTermNavigation.children[title] = { Title: title, Url: url };
subTermNavigation.children[title].children = { $_index: [] };
}
else {
$.each(termNavigation.$_index, function (index1, key1) {
var current = termNavigation[termNavigation.$_index[index1]];
var flag = 0;
$.each(current.children.$_index, function (index2, key2) {
if (current.children.$_index[index2] == parentNode) {
var rootTermNavigation = current.children[current.children.$_index[index2]];
rootTermNavigation.children.$_index.push(title);
rootTermNavigation.children[title] = { Title: title, Url: url };
flag = 1;
return false;
}
});
if (flag == 1) {
return false;
}
});
}
});

StorePortal.GlobalNavigation.GeneralNavigationLayout(termNavigation);
return termNavigation;
}

c. Generate the HTML and render it

// General html layout
StorePortal.GlobalNavigation.GeneralNavigationLayout = function (termNavigation) {
var HTML = '<ul class="nav-contains">';
$.each(termNavigation.$_index, function (index1, key1) {
var currentTop = termNavigation[termNavigation.$_index[index1]];
//FOH
if (currentTop.children.$_index.length != 0) {
HTML += '<li class="nav-children ' + currentTop.Title.replace(/ /g, "").replace(/&/g, "") + '"><a href="' + currentTop.Url + '">' + currentTop.Title + ' <i class="fa fa-angle-down"></i><i class="fa fa-angle-up" style="display:none"></i></a>';
HTML += '<div class="nav-menu sp-shadow">';
HTML += '<a href="' + currentTop.Url + '" class="nav-title">' + currentTop.Title + ' <i class="fa fa-angle-right"></i></a> ';

$.each(currentTop.children.$_index, function (index2, key2) {
var secondTermNavigation = currentTop.children[currentTop.children.$_index[index2]];

if (index2 == 0 || index2 == 3) {
HTML += '<div class="nav-sub-row">';
}
HTML += '<div class="nav-sub-cell"> ';
// Product
if (secondTermNavigation.children.$_index != 0) {
HTML += '<a href="' + secondTermNavigation.Url + '">' + secondTermNavigation.Title + ' <i class="fa fa-angle-right"></i></a>';
HTML += '<ul>';
//price change
$.each(secondTermNavigation.children.$_index, function (index3, key) {
HTML += '<li>';
var rootTermNavigation = secondTermNavigation.children[secondTermNavigation.children.$_index[index3]];
HTML += '<a href="' + rootTermNavigation.Url + '">' + rootTermNavigation.Title + '</a>';
HTML += '</li>'
});
HTML += '</ul>';
}
else {
// Product
HTML += '<a href="' + secondTermNavigation.Url + '">' + secondTermNavigation.Title + '</a>';
}

HTML += '</div>';
if (index2 == 2 || (index2 != 2 && index2 == (currentTop.children.$_index.length - 1))) {
HTML += '</div>';
}
});
HTML += '</div>';
}
else {
HTML += '<li class="nav-children ' + currentTop.Title.replace(/ /g, "").replace(/&/g, "") + '"><a href="' + currentTop.Url + '">' + currentTop.Title + '</a>';
}

HTML += '</li>';
});
HTML += '<ul>';
$(".navigation").append(HTML);
}

d. Add the relevant event in document ready

$(function () {
StorePortal.GlobalNavigation.GetNavigationJson();
$(".navigation").on("click", ".nav-children > a", function (event) {
if ($(this).next().length > 0) {
var target = $(event.target);
event.preventDefault();
if ($(this).next()[0].style.display == "none" || $(this).next()[0].style.display == "") {
$(".nav-menu").hide();
$(".fa-angle-up").hide();
$(".fa-angle-down").show();
$(this).next().toggle();
$(this).find(".fa-angle-down").toggle();
$(this).find(".fa-angle-up").toggle();
}
else {
$(".fa-angle-up").hide();
$(".fa-angle-down").show();
$(this).next().hide();
}
}
});

$("body").on("click", function (event) {
var target = $(event.target);
if (target.closest(".nav-children").length==0 || !($.contains(target.closest(".nav-children")[0], event.target))) {
$(".nav-menu").hide();
$(".fa-angle-up").hide();
$(".fa-angle-down").show();
}
});
});

e. Finally, Add the CSS

.navigation {
margin-bottom:500px;
}

.navigation ul {
padding: 0px;
}
a{
white-space: nowrap;
}
.nav-children {
position: relative;
display: inline-block;
padding: 8px 20px;
color: #464646;
letter-spacing: 0.02em;
line-height: 24px;
}

.nav-contains > li {
font-size: 20px;
line-height: 24px;
}

.nav-menu {
display: none;
position: absolute;
left: 0px;
top: 40px;
padding: 20px;
padding-top: 10px;
color: #fff;
font-family: "Segoe UI light";
z-index: 9999;
border: 1px solid rgba(0, 0, 0, 0);
}

.nav-menu .nav-title {
display: inline-block;
font-size: 36px;
font-family: "Segoe UI light";
margin: 30px 0;
}

.nav-menu a {
color: white !important;
font-family: "Segoe UI light";
}

.nav-sub-row {
display: table-row;
}

.nav-sub-cell {
display: table-cell;
padding-right: 60px;
padding-bottom: 50px;
}

.nav-sub-cell li {
display: block;
padding-top: 5px;
padding-bottom: 5px;
}

.nav-sub-cell > a {
display: block;
font-size: 26px;
white-space: nowrap;
padding-bottom: 10px;
}

.nav-sub-cell li a {
font-size: 15px;
white-space: nowrap;
}

.FrontofHouse .nav-menu {
background-color: #B4009E;
}

.BackofHouse .nav-menu {
background: #7A44A2;
}

.Learning .nav-menu {
background: #107C10;
}

.HR .nav-menu {
background: #008272;
}

.CompanyCulture .nav-menu {
background: #D83B01;
}

.FrontofHouse > a:hover {
color: #B4009E !important;
}

.BackofHouse > a:hover {
color: #7A44A2 !important;
}

.Learning > a:hover {
color: #107C10 !important;
}

.HR > a:hover {
color: #008272 !important;
}

.CompanyCulture > a:hover {
color: #D83B01 !important;
}

.SharePoint > a:hover {
color: #B4009E !important;
}

.ObjectModel > a:hover {
color: #7A44A2 !important;
}

.Top > a:hover {
color: #107C10 !important;
}

.SharePoint .nav-menu {
background-color: #B4009E;
}

.ObjectModel .nav-menu {
background: #7A44A2;
}

.Top .nav-menu {
background: #107C10;
}