Quicklaunch Navigation as a Pop-out in SharePoint 2010

Introduction

SharePoint 2010 has a quick launch navigation that shows the structure of the Sharepoint site, but due to branding considerations, this quick launch navigation is normally hidden and the main content is then centralized onto the page. I recently have a project in which the side navigation was hidden and users do not have an option to go to other parts of the site without going back to the main page. So with the use of JavaScript, the issue was resolved by moving the navigation menu into a JavaScript div tag and have the side navigation appear whenever the user clicks on a button.

Using the Code

The JavaScript that should be added to the masterpage header. DisplayNavigation() will set the display to visible, while GetParentPath() function is to get the parent URL of the page as the page might reside in a subsite.

So for example, if the page URL is http://www.contoso.com/marketing/sitepages/default.aspx, GetParentPath() should return http://www.constoso.com/marketing/.

function GetParentPath(){
	var newPathname = "";
	var pathArray = window.location.pathname.split( '/' );
	newPathname += "/";
	newPathname += pathArray[1];
	window.location = newPathname;
}				
				
function DisplayNavigation(id){
	obj = document.getElementById(id);
    if (obj.style.display == "none") { // if it's already hidden we slide it down
        obj.style.visibility = "visible";
        obj.style.display = "block";
    }
    else
    {
        obj.style.visibility = "hidden";
        obj.style.display = "none";
	}  

The following should be placed within the master page:

1. Look for the following <div> tag:
   C#

   <div id="s4-statusbarcontainer">
   

2. Place the codes below before the above tag:
   C#

   <img src="/Style Library/Images/navigationshow.png" 
   onclick="javascript:DisplayNavigation('Cust-s4panel')" style="cursor: pointer; " 
   width="20" height="20" alt="View Site Navigation" title="View Site Navigation" />

   XML

   <!-- Cust Navigation -->
   
   <div id="Cust-s4panel" style="border:medium #2895d5 solid; 
   background:white; display:none; top:130px; left:20px; position:absolute; 
   float:left; z-index:5000">
   <br>
   <div id="CustNaviOption" style="width:160px; padding:5px; 
   ">&nbsp;<a href="javascript:GetURLPath()" 
   title="home">Home</a><img src="/Style Library/Images/close.png" 
   onclick="javascript:DisplayNavigation('Cust-s4panel')"" 
   style="vertical-align:middle; cursor: pointer; float:right" 
   onmouseover="" />
   </div>

3. Look for SharePoint:SPNavigationManager and take the whole code and place it within the above <div id="Cust-s4panel>. Do not just copy and paste the code below into the div tag because Sharepoint will prompt that duplicate id is used and also the subsite navigation will not display any subsites.
   C#

   <Sharepoint:SPNavigationManager
   	id="QuickLaunchNavigationManager"
   	runat="server"
   	QuickLaunchControlId="QuickLaunchMenu"
   	ContainedControl="QuickLaunch"
   	EnableViewState="false"
   	CssClass="ms-quicklaunch-navmgr">
   <div>
   <SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">
   	<Template_Controls>
   		<asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" 
   		ShowStartingNode="False" id="QuickLaunchSiteMap" 
   		StartingNodeUrl="sid:1025" runat="server" />
   	</Template_Controls>
   	</SharePoint:DelegateControl>
   	<SharePoint:UIVersionedContent UIVersion="3" runat="server">
   	<ContentTemplate>
   		<SharePoint:AspMenu id="QuickLaunchMenu" runat="server" 
   		DataSourceId="QuickLaunchSiteMap1" Orientation="Vertical" 
   		StaticDisplayLevels="2" ItemWrap="true" 
   		MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0" 
   		SkipLinkText="" CssClass="s4-die">
   		<LevelMenuItemStyles>
   			<asp:menuitemstyle CssClass="ms-navheader" />
   			<asp:menuitemstyle CssClass="ms-navitem" />
   		</LevelMenuItemStyles>
   		<LevelSubMenuStyles>
   			<asp:submenustyle CssClass="ms-navSubMenu1" />
   			<asp:submenustyle CssClass="ms-navSubMenu2" />
   		</LevelSubMenuStyles>
   		<LevelSelectedStyles>
   			<asp:menuitemstyle CssClass="ms-selectednavheader" />
   			<asp:menuitemstyle CssClass="ms-selectednav" />
   		</LevelSelectedStyles>
   		</SharePoint:AspMenu>
   	</ContentTemplate>
   	</SharePoint:UIVersionedContent>
   	<SharePoint:UIVersionedContent UIVersion="4" runat="server">
   	<ContentTemplate>
   		<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" 
   		EnableViewState="false" DataSourceId="QuickLaunchSiteMap" 
   		UseSimpleRendering="true" UseSeparateCss="false" 
   		Orientation="Vertical" StaticDisplayLevels="2" 
   		MaximumDynamicDisplayLevels="0" SkipLinkText="" 
   		CssClass="s4-ql" />
   	</ContentTemplate>
   	</SharePoint:UIVersionedContent>
   	</div>
   </Sharepoint:SPNavigationManager>
   </div>
   <!-- End of cust navigation --> 

That's it!

Points of Interest

Reusing the quick launch navigation and creating the pop-out menu wasn't as difficult as initially thought, since the main issue was actually creation of the JavaScript to display the menu and setting the z-index so that it appears above the rest of the SharePoint controls.

History

• 30^th September, 2013: Initial version