There are many limitations, when you want to tweak the SharePoint’s
default navigation to add multiple levels in left/top navigation.
SharePoint supports only 2 level of fly-out navigation. For multilevel
navigation there are following approaches:
1. Create your own user control
2. Extend the SharePoint Navigation Provider
I have extended the default navigation provider PortalSiteMapProvider to show multilevel fly-out navigation.
Step 1: Create a C# class library project with the following code:
using
System.Web;
using
Microsoft.SharePoint.Publishing;
using
Microsoft.SharePoint.Publishing.Navigation;
namespace
CustomNavProvider
{
public class Navigation :
PortalSiteMapProvider
{
SiteMapNodeCollection
siteMapNodeColl = null;
public override SiteMapNodeCollection
GetChildNodes(System.Web.SiteMapNode node)
{
PortalSiteMapNode
pNode = node as PortalSiteMapNode;
if (pNode
!= null)
{
if
(pNode.Type == NodeTypes.Area)
{
SiteMapNodeCollection
nodeColl = base.GetChildNodes(pNode);
//We can
use SharePoint list or XML file to make our navigation configurable.
SiteMapNode
childNode = new SiteMapNode(this, "<http://www.mainsite.com>",
"<http://www.mainsite.com>",
"Root site");
SiteMapNode
childNode1 = new SiteMapNode(this,"<http://www.level1site.com>",
"<http://www.level1site.com>",
"Level 1 Site");
SiteMapNode
childNode2 = new SiteMapNode(this,"<http://www.level2site.com>",
"<http://www.level2site.com>",
"Level 2 Site");
SiteMapNode
childNode11 = new SiteMapNode(this,
"<http://www.level11site.com>", "<http://www.level11site.com>", "Subsite level 11");
SiteMapNode
childNode12 = new SiteMapNode(this, "<http://www.level12site.com>",
"<http://www.level12site.com>",
"Subsite level 12");
SiteMapNode
childNode111 = new SiteMapNode(this, "<http://www.level111site.com>",
"<http://www.level111site.com>",
"Site Pages 1");
SiteMapNode
childNode112 = new SiteMapNode(this, "<http://www.level112site.com>",
"<http://www.level112site.com>",
"Site Pages 2");
nodeColl.Add(childNode);
siteMapNodeColl = new SiteMapNodeCollection();
siteMapNodeColl.Add(childNode111);
siteMapNodeColl.Add(childNode112);
childNode12.ChildNodes =
siteMapNodeColl;
siteMapNodeColl = new SiteMapNodeCollection();
siteMapNodeColl.Add(childNode11);
siteMapNodeColl.Add(childNode12);
childNode1.ChildNodes =
siteMapNodeColl;
siteMapNodeColl = new SiteMapNodeCollection();
siteMapNodeColl.Add(childNode1);
siteMapNodeColl.Add(childNode2);
childNode.ChildNodes =
siteMapNodeColl;
return
nodeColl;
}
else
return
base.GetChildNodes(pNode);
}
else
return new SiteMapNodeCollection();
}
}
}
Step 2: Deploy the solution or Copy the dll in GAC.
Step 3: Add following entry in web.config for your web application
<siteMap defaultProvider="CurrentNavigation" enabled="true">
<providers>
<add name="MyCustomNavigationProvider" type="CustomNavProvider.Navigation,
CustomNavProvider, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=b8dd7d04a4a7e53e" NavigationType="Current" />
Step 4: Create a custom master page or update the v4.master with
SharePoint designer 2010, and then add the following code under the left navigation’s
ContentPlaceHolder element.
<SharePoint:AspMenu
ID="LeftNavigationMenu"
Runat="server"
DataSourceID="leftSiteMap1"
EnableViewState="false"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
Orientation="Vertical"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="4"
DynamicHorizontalOffset="0"
StaticPopoutImageUrl="/_layouts/1033/images/next.gif"
StaticPopoutImageTextFormatString=""
DynamicHoverStyle-BackColor="#CBE3F0"
SkipLinkText=""
StaticSubMenuIndent="0"
CssClass="ms-topNavContainer">
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
<StaticSelectedStyle CssClass="ms-topnavselected"
/>
<StaticHoverStyle CssClass="ms-topNavHover" />
<DynamicMenuStyle BackColor="#F2F3F4" BorderColor="#A7B4CE"
BorderWidth="1px"/>
<DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
<DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
<DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="MyCustomNavigationProvider"
id="leftSiteMap1"
runat="server"
StartFromCurrentNode="true"/>
Step 5: Recycle your
application pool and your site should now displaying the updated navigation.
No comments:
Post a Comment