SharePoint 2010 top Navigation?

Question

I have styles with CSS the ootb (out of the box) top navigation in Shrepoint 2010. However I also want to add icons (.png images) for ech navigation manu itme. So for exapmple for Home I will like to an icon next to it, for About Us again another icon next to it and so on for Practices, Sectors, Our Events, Our People, Publications and Working for Us.

SharePoint 2010 basically builds the top navigation by using asp controls. I can see the in firebug(Firefox) and developer tools (IE) the HTML for the top navigation hwoever on the master page this is not visible.

What is th best way include icons in the top navigation items?

Thank in advance

Answer 1

You need to build your own asp.net control if you are going to customise this part of the menu I'm afraid. OOTB you can only alter the CSS and (limitedly) control what is shown. You can use the same DataSource if you wish for the SharePoint UI to remain in control.

Answer 2

I had the same problem with a site I am working on. I wanted to add individual icons to each main menu item but had no way to target them.

To get around this without creating a custom control I used jQuery to add a class that increments based on the number of menu items and then used this class to apply styles in my CSS.

$("a.menu-item").each(function(i) {
    $(this).addClass("nav-" + (i+1));
});

Hope this helps you out!