>For converting the left navigation of a SharePoint site to an Expandable and Collapsible left navigation then complete the below steps
1. Create a custom navigation
2. Updating the master page with JavaScript files

1. Create a custom navigation
– Go to “Site Settings” Click on “Navigation” link under “Look and Feel Section”
– Select “Display the navigation items below the current site” under “Global navigation” section
– Create the Structure of the navigation under Current navigation

NOTE: If we have links under any heading then do not give any URL for the heading.

Updating the master page with JavaScript files
a)Open the Site in SharePoint Designer
b)Include a reference to jquery library in the master page. You can find the jquery library from http://www.jqueryUI.com
c)Now update the master page with the below script

//Starts when DOM is ready
$(function(){

//For each Quick Launch navigation sub menu:
$(“table.ms-navSubMenu2”).each(function(){
//Find any navigation items under the sub menu that have been selected.
var selectedNavItems = $(this).find(“a.ms-selectednav”);

//Find the corresponding navigation header of the current sub menu being processed
var menuHeader = $(this).parents(“tr:eq(0)”).prev(“tr”).find(“table.ms-navheader:eq(0)”);

if ($(menuHeader).hasClass(“ms-selectednavheader”) || selectedNavItems.length > 0)
{
//if the navigation header for this sub menu is selected or if there are any
//selected navigational items in this submenu, show the submenu.
$(this).show();
}
else
{
//otherwise, hide the submenu
$(this).hide();
}
});

//When a user clicks a navigation header, the user should be taken directly
//to the site link. The javascript event handler to hide/display the submenus
//should not be triggered.
$(“a.ms-navheader”).click(function(e){
e.stopPropagation();
});

//When the user hovers over the navigation header, it would be nice
//to have an indicator that they can click on the header. Usually,
//browsers use the hand icon to indicate clickable items.
$(“table.ms-navheader”).hover(function(e){
$(this).css(“cursor”, “hand”);
}, function(e){
$(this).css(“cursor”, “default”);
});

//Finally, this adds a click event handler for the navigation header table
$(“table.ms-navheader”).click(function(e)
{
var subMenu = $(this).parents(“tr:eq(0)”).next(“tr”).find(“table.ms-navSubMenu2:eq(0)”);
if (subMenu.length > 0)
{
//only if we have a submenu should we hide the other submenus and show the current one.
$(“table.ms-navSubMenu2”).hide(“slow”);
subMenu.show(“slow”);
}

});
});

This completes the changes to be made for achieving an Expandable and Collapsible left navigation control. Now on saving the master page file, left navigation is converted to expand\collapse left nav

Advertisements