Styling the MOSS horizontal navigation menu

When you want to create a custom theme for a SharePoint site the top navigation menu is an important part of the design. Using the out of the box themes you can change the colors but if you really want it to look like a non-SharePoint menu it will take some work. In the standard sharepoint masterpage you will see the following code that defines the horizontal navigation. If you are not familiar with styling ASP server controls it can be somewhat confusing.

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
DataSourceID="topSiteMap"
EnableViewState="false"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
DynamicHorizontalOffset="0"
StaticPopoutImageUrl="/_layouts/images/menudark.gif"
StaticPopoutImageTextFormatString=""
DynamicHoverStyle-BackColor="#CBE3F0"
SkipLinkText=""
StaticSubMenuIndent="0"
CssClass="ms-topNavContainer">
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
<StaticSelectedStyle CssClass="ms-topnavselected" />
<StaticHoverStyle CssClass="ms-topNavHover" />
<DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
<DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
<DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
<DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

From a designers perspective what matters most if the way this code is rendered on the page. In the code above you will see several CssClass tags. These define what CSS classes are used when the page is rendered through the browser. You can change them in the masterpage to whatever you want, but remember changing them can cause styles defined in core.css not to work.

Output

For each menu item SharePoint generates the following code (its not pretty).

<td>
<table border="0"
cellpadding="0"
cellspacing="0"
width="100%"
class="zz1_TopNavigationMenu_5">
<tr>
<td style="width:0px;"></td>
<td onmouseover="Menu_HoverStatic(this)"
onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)"
id="zz1_TopNavigationMenun1">
<table class="ms-topnav zz1_TopNavigationMenu_4"
cellpadding="0"
cellspacing="0"
border="0"
width="100%">
<tr>
<td style="white-space:nowrap;">
<a class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3"
href="/sites/ops/SIO/API/SharePointSupport/test/testing/Pages/AboutUs.aspx"
style="border-style:none;
font-size:1em;">
About Us
</a>
</td>
</tr>
</table>
</td>
<td style="width:0px;"></td>
</tr>
</table>
</td>

This is one of the things I hate about SharePoint. There is a whole lot of code generated just for one menu item that could have been made with just an unordered list. Additionally you will notice that SharePoint includes some inline styles that may need to be overridden. 

To style the menu I have found Heather Solomon’s CSS Chart very helpful.  Here is a breakdown of some of the styles I typically use.

• .ms-topnav a – controls all the links in the top level menu.  I use this to set the font family and color as well as remove any background color / images.
• .ms-topnav td – remove background color / image behind the menu
• .ms-bannerframe – set the background color for the table that holds the menu and site actions menu

There are other css classes that can be used but I use these the most.  In most cases instead of styling the td that holds each menu item I apply my styles to the <a> tag which makes things simpler.  The rest of my css just removes SharePoint’s normal styling.

This is a menu I styled using the td classes. The CSS is used is below. I try to avoid using !important in my CSS but sometimes SharePoint just won’t listen.

.ms-topnav a {
font-family:Georgia;
background-color:transparent;
background-image:none;
color:#ccc;
padding:5px;
border-bottom:0px;
}
.ms-topnav a:hover {
background-color:#666;
border-bottom:0px;
}

.ms-topnav td {
background-image:none;
background-color:#424242;
border:0px;
padding:5px;
padding-bottom:0px;
}
.ms-topnav table td{
border:0px;
}
.ms-topNavContainer {
border:0px;
}
.ms-topNavHover{
border:0px;
}
.ms-topnavselected a{
border:0px;
background-color:#EF6100;
color:#fff;
background-image:none;
}
.ms-topnav{
border:0px;
background-color:#ccc;
}
.ms-bannerframe {
background:#424242;
border-bottom:3px solid #EF6100;
border-top:1px solid #666 !important;
}

Note

When you mannually add items and headings to the menu the code that is generated is slightly different so its always good to check this before launching the site.