SharePoint have default OOB Left Navigation, this can be customized based on permission level. This Jquery custom Left Navigation works as same as OOB, here we can add icon instead of Text, Left Navigation can be changed to Right or center based on requirements.
The configuration requirement for this custom Navigation is Jquery and SpServices Js. Create a List with below fields:
- List Name: Navigation Configuration.
- Field Names: Navigation Text, Navigation URL, Header, GroupName, imageurl. All the fields are maintained as single Line of Text, which can be changed later based on requirements.
The below implementation does'nt have sub level navigation, this can be implemented by adding another field to specify root or sub level navigation.
Links handled for one group only. If more than one group are configured for a link, it will not work. If no groupname specified for a link in configuration List, then the link will be visible to all.
<script type="text/javascript" src="/SiteAssets/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var array = [];
var DynNavigation = "";
$().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: $().SPServices.SPGetCurrentUser(),
async: false,
completefunc: function(xData, Status) {
$(xData.responseXML).SPFilterNode("Group").each(function() {
array.push($(this).attr("Name"));
});
}
});
alert(array.length);
$().SPServices({
debug: true,
operation: "GetListItems",
async: false,
webURL: 'http:\\dsplsp2013',
listName: "Navigation Configuration",
CAMLQuery: "<Query><OrderBy><FieldRef Name='Navigation_x0020_Order' Ascending='TRUE'/></OrderBy></Query>",
completefunc: function(xData, Status) {
alert(xData.responseXML.xml);
if (xData) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var NText = $(this).attr("ows_Navigation_x0020_Text");
var NURL = $(this).attr("ows_Navigation_x0020_URL");
var NHeader = $(this).attr("ows_Header");
var GroupName = $(this).attr("ows_GroupName");
var Nimg = $(this).attr("ows_imageurl");
if (typeof(GroupName) == 'undefined') {
DynNavigation = DynNavigation + "<img src=" + Nimg + "> <H4><a href='" + NURL + "'> -" + NText + "</a></H4></img>";
} else {
for (i = 0; i < array.length; i++) {
if (array[i] == GroupName) {
DynNavigation = DynNavigation + "<img src=" + Nimg + "> <H4><a href='" + NURL + "'> -" + NText + "</a></H4></img>";
}
}
}
});
}
}
});
$('#CustomNavigation').append(DynNavigation);
});
</script>
<div id="CustomNavigation"> </div>