Display Separator in Sharepoint AspMenu Control
All I'm trying to do is show a separator (I've tried images and stylesheets) between the main navigation menu items in Sharepoint. This is what I want it to look like:
Home | Menu1 | Menu2 | Menu3
When I try to use the StaticTopSeparatorImageUrl (using the image in the panel) it results in this:
Home | Menu1 | Menu2 | Menu3 |
It is obviously not a separator and when I use StaticBottomSeparatorImageUrl the opposite happens. I also tried to create a ms-topnav class for the 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 Telerik RadMenu, after I tried to get it in Sharepoint, I had difficulty displaying it as a Sharepoint menu using SiteMapDataSource (only display Home element and no children).
It sounds simple, but it's Sharepoint, so nothing is very simple. I'm wondering if there is a way to make the default Sharepoint separator correct, which I might have missed, or is there a GOOD Sharepoint menu replacement that actually respects the style?
source to share
I prefer to inherit from the MossMenu that the SharePoint team released and customize the menu to get exactly the html I want.
The instructions for deploying here should help.
- Take the Microsoft.SDK.SharePointServer.Samples.dll file and place it in the GAC.
- Edit the web.config file and add the following SafeControls entry:
- Copy the MossMenu.js file to the \ 12 \ TEMPLATE \ LAYOUTS folder
- Modify the MasterPage as follows: <% @Register Assembly = "Microsoft.SDK.SharePointServer.Samples, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = 6f07a0c27c74cfa1" Namespace = "Microsoft.SDK.SharePointServer.Samples" TagPrefix = "Sharepoint "%>
- Modify the SharePoint: AspMenu tag with SharePoint: MossMenu. Leave all configuration tags the same.
source to share