The most prominent way to navigate within a SharePoint site is using the menus. SharePoint has two menu structures: the top main navigation, and the quick launch navigation which is usually located at the left side of your screen. When you’re defining the menu structure, you might consider flyout menu’s. These javascript powered menus will popup whenever you hover over their parent’s node. They have a huge space saving gain, so they are quite frequentaly used.
As they are native ASP.NET controls, you can somewhat customize these menus. This can be done by editing the master page. See msdn for more options on these menus.
There is, however, a nasty little issue when custom branding these flyout menus. Let me show you:

For some reason the background of a dynamic menu would not change when setting it in the CSS class of the menu. (You can specify a CSS class for the ASP.NET menu to use) A possible resolution would be to change the background of the nodes themselves.

Unfortunately this gives some nasty gaps when using margins. I just had to find a way to color the background all together. When investigating the thing, I discovered this in the output.

.zz1_GlobalNav_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }

Somewhy, something had outputted some extra styles straight into the master page. Firstly, inline CSS, I really discourage using CSS like this, unless for testing purposes or if there really is no ther way. However, even I get sometimes tempted. But the point is, it’s bad, as it blocks using external CSS files. Secondly, why is the background color white? Once again I had to rely on Reflector as the ultimate resort to find what went wrong and how those styles were rendered. This is what I found in the PopOutPanelStyle class:

if (base.BackColor.IsEmpty && ((this._owner == null) || this._owner.BackColor.IsEmpty))
{
attributes.Add(HtmlTextWriterStyle.BackgroundColor, "white");
}

In other words, ASP.NET automaticly adds a white background when there is no background color defined in the color and the when the parent is empty. And this was the case in my example. So what is the solution? Putting the color directly as parameter in the control using BackColor.

…

You didn’t really think I would leave it at that, now did you? Well, there is another solution. As I couldn’t live with the fact there was a color directly defined in the master page, I continued searching. Finally, it was the magical CSS which, once again, offered a nice way out. When rendering a dynamic menu, ASP.NET first renders an absolute positioned panel with the actual menu table in it. And it’s this panel which has the menu’s CSS class reference, instead of the table with static menus. This gives us some flexibility. Thanks to the cascading styles, we can reach the untampered table with the following reference: .navGlobalFlyOuts table, allowing us to set the background after all:

.navGlobalFlyOuts table
{
background: #F7DCEA;
}

Once again, CSS has saved the day. Thank you CSS.

Tags: ASP.NET, Branding, CSS, Issues, Menu, SharePoint
This entry was posted on Wednesday, October 10th, 2007 at 0:07 and is filed under Branding, SharePoint. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.