Highlight Left Navigation Using JS And SharePoint

In this blog, we will take a look at creation of left navigation and highlighting categories based on URL value.

I have created one community site in SharePoint for internal discussion of our company. For that, I have used all out of box features. In that, I have created multiple categories based on the company categories/products. The requirement is that we need to show all the categories in the left side and after clicking on any one of that, it should navigate to that particular discussion.

Below are the steps I followed.

Create community site using Site Contents -> New subsite -> give name to that site.
Select Community site template from collaboration menu-> select permission option to inherit parent permission or not, and click on "Create" button.
After creation of site, open root site in designer using run as administrator option, go to Master pages -> create new master page (discussionforumMaster.html) using Seattle.
Check out discussionforumMaster.html and open it for editing.
Now, we will add one div in master page for left navigation to appear on each page.
Search “ms-core-listMenu-verticalBox” in discussionforumMaster.html and add the below code after the end of this div (<div class="ms-core-listMenu-verticalBox">).

<div id="ForumleftNavigation" style="margin-left: 22px;font-size: 15px;" class="forum-left-navigation"></div>

This div will appear on left side.

Now, we will dynamically bind categories to the div that we have added in master page from categories list of SharePoint.

Create one JS file and add the below code into it.

$(document).ready(function() {
getCategories();
});
function getCategories() {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Categories')/items",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
if (data.d.results.length > 0) {
var resultDiv = "<ul>";
$.each(data.d.results, function(index, item) {
var categoryurl = _spPageContextInfo.webAbsoluteUrl + "/SitePages/Category.aspx?CategoryID=" + item.ID + "&SiteMapTitle=" + item.Title;
resultDiv = resultDiv + "<li id='" + item.Title + "'><a href='" + categoryurl + "' style='text-decoration:none;'>" + item.Title + "</a></li>";
});
resultDiv += "</ul>";
$("#ForumleftNavigation").append(resultDiv);
}
},
error: function(data) {
alert("Error: " + data);
}
});
}
$(window).load(function() {
var category = getUrlParameter('SiteMapTitle');
$('#' + category).css("background", "#d8d6d6");
});
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

For CSS, create one CSS file and add the below styles into it.

.ms - webpart - titleText {
font - family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif"!important;
font - size: 18 px!important;
color: black!important;
}.ms - comm - activityStatsNumber.ms - largeNumber {
color: black!important;
}.ms - comm - activityStatsItem {
color: black!important;
font - size: 14 px!important;
}.ms - textSmall.ms - srch - sb - prompt.ms - helperText {
color: black!important;
} #ForumleftNavigation ul li a {
font - family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif"!important;
}
span.ms - textLarge.ms - noWrap {
font - family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif"!important;
font - size: 16 px;
}
h1 #pageTitle {
display: none!important;
}.ms - accentText.ms - textXLarge {
font - family: "Lucida Sans Unicode", "Lucida Grande", sans - serif!important;
font - size: 20 px!important;
}#ForumleftNavigation ul {
list - style - type: none;
margin: 0;
padding: 0;
width: 160 px;
border: 1 px solid #887f7f;
}
#ForumleftNavigation ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
#ForumleftNavigation ul li {
border - bottom: 1 px solid #bbb0b0;
}#ForumleftNavigation ul li: last - child {
border - bottom: none;
}.ms - comm - postListItem {
padding: 10 px;
border - bottom: 1 px solid #eae1e1;
font - family: "Lucida Sans Unicode",
"Lucida Grande",
sans - serif!important;
}

Save both the .css and the .js files and reference these files into master page. Check in master and apply to the community site that we have created.

All categories will appear on the left side and when we redirect to the categories discussion, it will highlight that category.

Thank you.