在Sharepoint AspMenu控件中显示分隔符

Question

All I'm trying to do is display a separator (I've tried images & stylesheets) between the primary navigation menu items in Sharepoint. Here is what I want it to look like:

Home | Menu1 | Menu2 | Menu3

When I attempt to use the StaticTopSeparatorImageUrl (using a bar image) it results in the following:

Home | Menu1 | Menu2 | Menu3 |

This is obviously not a separator, and when I use the StaticBottomSeparatorImageUrl the opposite happens. I also tried to style the ms-topnav class to have a left border, which doesn't work because the control doesn't identify the first (or last) item in the menu...

So, my next option was to use the Telerik RadMenu, after fighting to get it into Sharepoint I had difficulties getting it to display like the Sharepoint Menu using the SiteMapDataSource (display only the Home item and no children).

This seems SO simple, but it is Sharepoint, so nothing is really simple. I'm wondering if there is either a way to make the default Sharepoint separator work correctly that I might have missed, or is there a GOOD Sharepoint menu replacement that actually takes styling into account?

Answer 1

I prefer to inherit from the MossMenu that the SharePoint team released and customise the menu to producte exactly the html I want.

http://blogs.msdn.com/sharepoint/archive/2006/12/02/customizing-the-wss-3-0-moss-2007-menu-control.aspx

The instructions for deployment here should help.

1. Take the Microsoft.SDK.SharePointServer.Samples.dll and put it in the GAC.
2. Edit the web.config file and add in the following SafeControls entry:
3. Copy the MossMenu.js file to \\12\\TEMPLATE\\LAYOUTS
4. Edit your MasterPage with the following: <%@ Register Assembly="Microsoft.SDK.SharePointServer.Samples, Version=1.0.0.0, Culture=neutral, PublicKeyToken=6f07a0c27c74cfa1" Namespace="Microsoft.SDK.SharePointServer.Samples" TagPrefix="Sharepoint" %>
5. Change the SharePoint:AspMenu tag with SharePoint:MossMenu. Leave all the config tags the same.

Answer 2

The actual splitter or separator can be customised by overriding the background image that is set to the top right (no repeating) in the topNavItem in Core.css

Just change the image being referenced there.