How can I define styles for individual cells in a SharePoint 2007 topnav?

Question

I have a client who is requesting separate colours for each individual navigation cell within the MOSS topnav. I know how to style the topnav bar as a whole, but can't think of a way to colour them separately.

I've looked at the source that SharePoint generates, and noticed the tabs are ID'd 'zz1_TopNavigationMenun1', 'zz1_TopNavigationMenun2' and so on, but can't seem to override the CSS.

Does anybody know of if it's possible to explicitly set each tab, and if so, what CSS to include?

Thanks much.

Answer 1

Yes you can style the individual tabs of the MOSS menu but it is very hacky (as the code is not accessible and styles are often inline, you need to use !important CSS hacks).

The table that contains all the menus has the following ID : zz1_TopNavigationMenu

Then, each topnav menu item has the following ID : zz1_TopNavigationMenun0, zz1_TopNavigationMenun1, etc. Starting from left to right (for the number at the end, so n0 is the left most menu item, n1 is the second, etc.)

Each menu item is a td. You can set the border of the menu item in your css by doing something like

#zz1_TopNavigationMenun1 {
   border-left:1px solid #FFFFFF !important;
   border-right:1px solid #FFFFFF !important;

}

You NEED to use the !important css hacks in order to make this work. Otherwise your styles will be overridden by inline styles that appear in the MOSS Menu (as the user hovers over it).

Inside these TDs, there is another table where you can set more styles (the look of the link for instance, etc.)

When a menu item is selected, the ms-topnavselected class is added to it. You can use that to apply a different color to the menu item for example (once again, use !important in your css)

When a menu item is not selected, you should get HTML that looks like this :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topnav zz1_TopNavigationMenu_4 ms-topnavselected zz1_TopNavigationMenu_10">
  <tbody>
    <tr>
  <td style="white-space: nowrap;">
        <a style="border-style: none; font-size: 1em;" href="...." class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected zz1_TopNavigationMenu_9">Text</a>
      </td>
</tr>
  </tbody>
 </table>

When it is selected, the HTML will look like this :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topnav zz1_TopNavigationMenu_4 ms-topnavselected zz1_TopNavigationMenu_10">
  <tbody>
    <tr>
  <td style="white-space: nowrap;">
        <a style="border-style: none; font-size: 1em;" href="...." class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3 ms-topnavselected zz1_TopNavigationMenu_9">Text</a>
      </td>
</tr>
  </tbody>
 </table>

The big difference between the 2 is the .ms-topnavselected so this is what you should use if you want to style the selected menu :

.ms-topnavselected {
     color:#FFFFFF !important;
}

for example (once again, you need the !important).

So basically, if you want to style menus based on their positions, style it from the table using #zz1_TopNavigationMenun, if you want to style the selected menu, go with .ms-topnavselected. For anything else inside there, you'll have to use parent-child relationships to access them (as their IDs are unreliable). For example :

#zz1_TopNavigationMenun1 > tbody > tr > td

to style a specific menu item.

Hope this helps!