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.

ListColumns.png

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. Using another excellent CodePlex tool Stramit SharePoint 2007 Caml Viewer, you can see the field names of the columns in the list. If the field names do not match, the Web Part wont work, the order of the columns is not important. After you have created the columns in the list and you have verified that the field names match, you can go back and rename them if you want to. You can see the field names using the CAML Viewer as seen here:

CAMLColumns.png

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 site collection(s) where the feature will be installed, then choose next
  • Choose Next, then Close to close out the setup
  • Once setup complete, activate your feature from Site Collection Features (Site Actions->Site Settings->Modify All Site Settings, under Site Collection Administration)

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="myMenu" Namespace="spNavigationMenu" Assembly="spNavigationMenu, Version=1.0.0.0, Culture=neutral, PublicKeyToken=c4f8a12532420039" %>

MasterPageRegister.png

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">
<myMenu:spNavigationMenu 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 myMenu 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:

<myMenu:spNavigationMenu runat="server" id="TopNavigationMenu" 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.

Update - 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.

Change The Look And Feel

So now you want to customize the look and feel, we can do that... You will need to define your styles in your stylesheet. Here is a list of the parameters you can pass to the Web Part, just like you would pass the Set_MenuList parameter shown above. If you dont specify any style parameter, defaults are assumed, here is a breakdown of the styles that you can control and their defaults.

Parameter name Default Value
Set_MenuContainer ms-topnavContainer
Set_StaticMenuItemStyle ms-topnav
Set_StaticSelectedStyle ms-topnavselected
Set_StaticHoverStyle ms-topNavHover
Set_DynamicMenuStyle ms-topnavContainer
Set_DynamicMenuItemStyle ms-topNavFlyOuts
Set_DynamicHoverStyle ms-topNavFlyOutsHover
Set_DynamicSelectedStyle ms-topNavFlyOutsSelected


For more information about the styles for the ASPMenu go here

Here are the remaining parameters that are available for the Web Part:

Parameter name Default Value
Set_MenuList spNavigationMenu
Set_ServerURL
Set_MenuOrientation Horizontal
Set_MenuName spNavMenu
Set_TopNavigationMenu yes
Set_MenuPreRenderClientScript

Override the On Hover event to On Click to activate menu

So you dont like your menu rendering when you move your mouse across the page? Would you prefer your menu to activate by a mouse click, then this feature is for you. As of spNavigation Menu 1.1, you can override the On Hover event for your horizontal menu. I plan on providing a side menu solution later. Some JavaScript is needed to pull this off. Im going to assume you have already defined some custom JavaScript in your master page, if not open up your master page and find the core.js ScriptLink:

<SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>

You can copy/pase the core.js line and set the name of the new script to whatever name you prefer, you will probably want to set Defer to "False":

<SharePoint:ScriptLink language="javascript" name="custom.js" Defer="False" runat="server"/>

After defining your JavaScript in your master page, you will need to copy (or create if youre rolling your own) the custom.js file to a location where SharePoint can find the file. If you are not sure where to put your JavaScript, you should put the file in the same location where you find your core.js. For the english version of SP 2007 that would be C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033. You can find the sample JavaScript script on the source code page. I didnt write the JavaScript, but I did tweak it to get it to work with the spMenu. I found the original source here.

Once you have all of that sorted out, you will need to pass the name of the function the Web Part will call during PreRender. So go into your master page and find the horizontal menu, assuming you have already completed the steps above, you will need to add 1 additional parameter Set_MenuPreRenderClientScript:

Set_MenuPreRenderClientScript="addClickBehaviorTop"

AddClickBehaviorTop is a function in the custom.js JavaScript that was defined in your master page (see above), if you named your function something else, you will need to replace addClickBehaviorTop with the name of your function. Please note JavaScript is case sensitive, so make sure the function name matches. So if you followed the steps from above, your menu should look like this:

<myMenu:spNavigationMenu runat="server" id="TopNavigationMenu" Set_MenuList="<name of your list>" Set_ServerURL="<url of your SharePoint site>" Set_MenuPreRenderClientScript="addClickBehaviorTop" />

All thats left to do is save and approve your master page.

Donations

If you like the spNavigationMenu and find it helpful, please consider making a donation to the project. Your donation will help support the further development of the spNavigationMenu project. Please click the image below to make a donation.

Donations

Last edited Sep 26, 2010 at 7:59 PM by JLSmith, version 35

Comments

ceci123 Mar 15, 2011 at 7:37 PM 
Will this work for Sharepoint 2010? Is there a demo site? Thanks