Sharepoint 2013 Custom Navigation with BootStrap

Its Strange that no one has already done this.

Lets try to get Custom Global Navigation accross multiple Site Collection with SiteMap file and BootStrap.

Please refer to my previous post about how to configure sitemap file as custom sitemap provider

1

 

 

 

 

 

 

 

Need SiteMAp file in this format

Update Web.Config to reference SiteMap

<?xml version=”1.0″ encoding=”utf-8″ ?>
<siteMap enableLocalization=”true”>
<siteMapNode title=”Home” url=”/”/>
<siteMapNode title=”Major Org Units” >
<siteMapNode title=”Companywide” url=”/sites/orgcharts-missions/Pages/default.aspx”/>

</siteMapNode>

</siteMap>

Use this Javascript code to alter DOM to convert Menu into bootstrap

$(document).ready(function() {

var elements = $(‘[id$=”TopNavigationMenu”]’);
elements.removeClass(‘ms-core-listMenu-horizontalBox’);
//Get Delta Navigation Start of Navigation
var rootul = $(“#DeltaTopNavigation”).find(“.ms-core-listMenu-root”);

//Change Root UL id to main-menu
rootul.attr(‘id’,’main-menu’);

//Remove Class from ul and add nav class
var id = rootul.attr(‘id’);
var sid = “#” + id ;
$(sid).removeClass(‘root ms-core-listMenu-root static’).addClass(‘nav’);
// $(sid).removeClass(‘root ms-core-listMenu-root static’);

//Add Home Icon
$(sid).prepend(” <li class=’home-link’><a href=’/_catalogs/masterpage/Home/index.htm’><i class=’icon-home hidden-phone’></i><span class=’visible-phone’>Home</span></a></li>”);

//Process all Li
$(‘ul#main-menu li’).each(function(i)
{
var cls = $(this).attr(‘class’);

if(cls ==”static”)
{
ProcessSimpleLi($(this));
}else if(cls ==”static dynamic-children”)
{
// alert(cls);
ProcessParentLi($(this));

}
else
{
// alert(“Unable to get node Class”);
}

});

});

function Processli(e)
{
}

function ProcessSimpleLi(e)
{
e.removeClass(‘static’)
var hyperlink = e.find(‘a’);
hyperlink.removeClass(‘static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode’);
var linktext = hyperlink.find(‘.menu-item-text’).text();
hyperlink.text(linktext);

//alert(linktext ) ;

}

function ProcessParentLi(e)
{

//Removing Class and Adding bootstrap class
e.removeClass(‘static dynamic-children’).addClass(‘dropdown’);

//Getting Text for node
var linktext = e.find(‘.menu-item-text:first’).text();
//alert(linktext );

//Appending + to text
var updatedtext = linktext + “+” ;

//Deleting First Span
var firstspan = e.find(‘span:first’);
firstspan.remove();
//Adding hyperlink with text
e.prepend(” <a data-toggle=’dropdown’ class=’dropdown-toggle menu-item’ href=’#’>”+updatedtext + “</a>”);

//Process Dynamic Ul
var firstul = e.find(‘ul:first’);
ProcessdynamicUL(firstul);
}

function ProcessdynamicUL(e)
{

//Removing Class and Adding bootstrap class
e.removeClass(‘dynamic’).addClass(‘dropdown-menu pull-left’);
e.attr(‘role’, ‘menu’);

e.find(‘li’).each(function () {

var cls = $(this).attr(‘class’);

if (cls == “dynamic”) {
ProcuessDynamicLi($(this));
} else if (cls == “dynamic dynamic-children”) {
// alert(cls);
ProcuessDynamicLiWithNodes($(this));

}

});
}

function ProcuessDynamicLi(e)
{
e.removeClass(‘dynamic’);
e.attr(‘role’, ‘menuitem’);
var hyperlink = e.find(‘a’);
hyperlink.removeClass(‘dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode’);
var linktext = hyperlink.find(‘.menu-item-text’).text();
hyperlink.text(linktext);
hyperlink.addClass(“menu-item”);
}

function ProcuessDynamicLiWithNodes(e) {
e.removeClass(‘dynamic dynamic-children’).addClass(“dropdown-submenu”);

var hyperlink = e.find(‘a:first’);
var linktext = hyperlink.find(‘.menu-item-text:first’).text();
hyperlink.text(linktext);
hyperlink.removeClass(‘dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode’);

hyperlink.addClass(“menu-item dropdown-toggle”);
hyplerlink.data(“toggle”,”dropdown”);

hyperlink.attr(‘tabindex’,”-1″);
//Process Dynamic Ul
var firstul = e.find(‘ul:first’);
ProcessdynamicUL(firstul);
}

Advertisements