How To: Manupilate SharePoint:AspMenu control (Style-wise)

Question

What I want to do is to split-up the globalnavigation bar on the sharepoint 2010 so I can control what menu-items should be floated to the left or right of the bar.

Is there a way to do this without a complete customized version of it, so I only have to edit the current one. Or do I actually have to make a complete new one?

What I have tried so far is just copying all of the UL > LI's there's used to display the menu-items like this:

<div class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="static">
            <li class="static dynamic-children">
                <a href="#" CssClass="static dynamic-children menu-item">
                    <span class="additional-background">
                        <span class="menu-item-text">Custom Dropdown</span>
                    </span>
                </a>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a href="#" class="dynamic menu-item">
                            <span class="additional-background">
                                <span class="menu-item-text">Test subsite</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

But it doesn't seem to trigger the dropdown functionality. Might just be a naive attempt.

Any links to guides or tutorials about this subject would be a great help.

I've done something similar, but didn't use the Sharepoint:AspMenu, but started using repeaters. You still can use the same datasource, or add some new. A link on which (2007) datasouces are available: http://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/ Not all of them work in 2010. Hope it helps a bit. (edit: could add a link to my blogpost, but it's dutch, so probably won't help you much) — Jan_V, Mar 23 '11 at 11:46
@Jan_V If you're blog contains blocks of code in it about this I would very much like to see it anyways. Anything that might help me in the right direction would be great help. — , Mar 23 '11 at 13:20
Well, in that case, here's the link: http://www.jan-v.nl/branding-styling-het-sharepoint-2010-menu — Jan_V, Mar 23 '11 at 13:47

score 5 · Accepted Answer · answered Mar 23 '11 at 14:49

For future reference, here's the content from the linked blogpost.

This uses an asp:Repeater instead of a sharepoint:AspMenu as the former allows much cleaner html and better styling. Also I've created several datasources on the masterpage which return the correct items I need to display.

<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">
        <HeaderTemplate>
            <ul id="main_menu_ul" class="">
        </HeaderTemplate>
        <ItemTemplate>
            <li><a href="<%# Eval("Url")%>" class="link">
                <%# Eval("Title")%></a></li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
    <asp:SiteMapDataSource SiteMapProvider="CombinedNavSiteMapProvider" ShowStartingNode="false"
        StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
        EnableViewState="true" ID="selectedSiteMap" runat="server" />

I found out which datasources to use with a little help of this post: http://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/ They are listed for SharePoint 2007, but most work for 2010 also.

Using several repeaters and datasources on the page you can create a very clean menu. Along with some javascript and css styling you can create every menu you want.

In SharePoint 2010 the (v4) AspMenu output is also "quite clean"; the advantage is that it is already annotated with all the standard SP (v4) CSS classes for styling. The same cannot be said for SharePoint 2007 OOB. — , May 04 '12 at 01:27
Good approach. One thing to note is that when you embark on this aproach, you will need to build that in the separate control b/c master page by default does not allow code blocks. — Roman, Aug 19 '14 at 23:31

How To: Manupilate SharePoint:AspMenu control (Style-wise)

1 Answers1