Create Your List First
Before you install the Web Part you should create a
custom list
on your primary site collection, note the list will need to reside in
the default lists location in the site collection: http://<your
url>/lists/<your list>. You can name the
list anything you want, you will be passing the list name to the Web
Part in your master page, which will be described below. Here is a list
of columns that you will need in your list.
The following
List Columns are used by the Web Part:
List Column Name |
Description |
Field Name |
Type |
Additional Info |
Title |
This field is already included in any list by default. |
LinkTitle |
Single line of text |
|
Link URL |
The navigation link. |
Link_x0020_URL |
Single line of text |
|
Link Order |
The order the link will appear in the menu. |
Link_x0020_Order |
Number |
|
Show Menu Item |
Show or hide the menu item. |
Show_x0020_Menu_x0020_Item |
Choice |
Add 2 values: Yes No |
Parent Menu |
The parent menu item. |
Parent_x0020_Menu |
Lookup |
Get Information From: choose <your list name> In this column: choose Title |
OpenNewWindow |
Open link in a new window |
OpenNewWindow |
Yes/No |
|
The name of the columns in the list are important because the column
names are hard coded in the Web Part. The field name is what really
matters here. The Web Part uses CAML queries to reference the fields in
the list.
You should add a couple of items to your list so you can see some
results once the Web Part is installed and configured in the Master
Page. So how do you accomplish security trimming, simple.... You can
apply permissions to each list item, slick.
Install The Web Part
After you have created your list, you can now install the Web Part, this is the easy part. Using another excellent tool
SharePoint Solution Installer, it was simple to create an installation for the feature:
- Download the zip file from the download section
- From a Web Frontend, unzip the zip file you just downloaded
- Run the setup.exe
- Keep
choosing next until you reach the Web Applications/Site Collections
page, click on the desired webapp(s)/site collection(s) where the
feature will be installed, then choose next
- Choose Next, then Close to close out the setup
- Your
feature should be activated but if not, activate your feature from Site
Collection Features (Site Actions->Site Settings->Site collection
featues, under Site Collection Administration)
You will see a reference to SharePoint 2007 when running the setup, this
is because the SharePoint Installer does not fully support SharePoint
2010, but it will install just fine.
Configure The Master Page
So now we have to add the Web Part to the Master Page. Using SharePoint
Designer, open up your Master Page. I find the split view in SPD the
easiest, so you can see the code and the design on one page. After
opening your master page, you will need to register
the assembly. At the top of the master page you will see several
assembly declarations, we need to register the assembly so we can use it
in the Master Page. Head to the end of the declaration section just
before the first HTML tag and add this line:
<%@ Register TagPrefix="spNav" Namespace="spNavMenu2010"
Assembly="spNavMenu2010, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=e7d947ded56689ec" %>
Next we can add the Web Part to the Master Page. We are going to replace
the top menu, but the Web Part can be configured as a side
menu/vertical navigation as well. Find the the ContentPlaceHolder
control for your top menu, should look something like this:
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">.
You will want to comment out everything
between the beginning and closing ContentPlaceHolder tags.
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<!-- <SharePoint:AspMenu ID="TopNavigationMenu" .....> ....
</SharePoint:AspMenu> <SharePoint:DelegateControl
...>...</SharePoint:DelegateControl> -->
</asp:ContentPlaceHolder>
Now add the new Web Part, make sure to put it
between the beginning and ending ContentPlaceHolder tags:
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<spNav:spNavMenu2010 runat="server" id="TopNavigationMenu"
Set_MenuList="<name of your list>" Set_ServerURL="<url of your
SharePoint site>" />
<!-- <SharePoint:AspMenu ID="TopNavigationMenu" .....> ....
</SharePoint:AspMenu> <SharePoint:DelegateControl
...>...</SharePoint:DelegateControl> -->
</asp:ContentPlaceHolder>
Just for clarity, you will notice that the original/commented out
AspMenu is below the spNav Web Part we just added and is between the
ContentPlaceHolder tags. There are a couple of parameters that are
necessary for the Web Part to work, one is the name of
the list you just created and the other is the URL of your primary site
collection, where your list resides.... If you named your list
MyList and your primary site collection url was
http://myspsite then your Web Part would look like this:
<spNav:spNavMenu2010 runat="server" id="TopNavigationMenu"
Set_MenuOrientation="horizontal" Set_TopNavigationMenu="yes"
Set_MenuList="MyList" Set_ServerURL="http://myspsite"/>
NOTE: If this is a top menu, you will need to give it a special
id - "TopNavigationMenu" or the menu items will display behind the
webparts on the page. There is an additional parameter to force the id,
but setting the id directly will suffice.
Once you add the menu, you should see it render from the SPD designer
view, if it doesnt, try clicking on a different control in the Master
Page, that will usually trigger an update. Save your work and
publish/approve your master page.
After you confirmed the Web Part is working you should remove the
original ASP Menu, while we have commented out the menu, it appears that
SPD (and SharePoint as well) still reads/processes the control. After
subsequent edits to the master page from SPD, I
noticed that SPD was adding some garbage to the commented menu and
causing the master page to produce errors. Problem resolved by removing
the commented out ASP menu.
Register the navigation css file
Find this tag in your master page:
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>
Add this tag right after the tag referenced above:
<SharePoint:CssRegistration name="spNavigation/spNavigation.css" After="corev4.css" runat="server"/>
This will register the css file that is installed with the web part. You
can customize the css file to meet your look and feel needs, see next
section.
Change The Look And Feel
So now you want to customize the look and feel, we can do that... This
is where things are much easier than the 2007 counterpart. There is a
custom style sheet built right into the solution. SharePoint 2010 also
makes this much easier as the rendering of the
menu is much cleaner. The style sheet can be found here C:\Program
Files\Common Files\Microsoft Shared\Web Server
Extensions\14\template\LAYOUTS\1033\STYLES\spNavigation\spNavigation.css.
The AspMenu has been preconfigured to look like the out of the box
menu,
feel free to customize for your needs.
Reference:
http://spnavigationmenu2010.codeplex.com/documentation