SharePoint Branding Issues: ASP.NET Flyout Menus
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. 
November 14th, 2007 at 2:19
[...] SharePoint Branding issues - ASP.NET flyout menus [...]
May 8th, 2008 at 10:51
Hi,
I was wondering how you can customize the flyouts of the quicklaunch menu.
I wasn’t able to find a class for the flyouts in the core.css file.
do I use the same class for the quicklaunch flyouts as the top navigation flyouts. or is there another way to do it??
thanx
May 20th, 2008 at 20:58
Robert,
As the quicklaunch menu is an asp menu. You can do the following:
<sharepoint :AspMenu id="quickLaunch" ... >
<dynamicmenustyle CssClass="myCssClass" />
</sharepoint>
This way you bind your styles to the myCssClass class in your css. Check the asp menu sdk entry on menu for more MenuStyles
Have fun styling!
June 27th, 2008 at 14:31
I have customised the quick lauch to be a flyout. Each of the flyouts needs to be next to the menu item it came from however i have found that data is truncated, i am able to see the fly out menu text only if there is no control in the content place holder.
Any help on this will be highly appreciated.
Thanks
July 7th, 2008 at 19:38
Danya,
This could be a CSS issue. Be sure to specify a width for your menu’s. See if this works.
Good luck!
November 16th, 2008 at 18:41
Tombo,
Nice post, and it’s the only one that shows up on Google concerning this issue. It all makes sense, but my problem is that I’m trying to make the background transparent but it keeps defaulting to white, arghh!
Is there a CSS solution to this or do I have to code my own PopOutPanelStyle class to set the default to transparent. I tried all the solution you describe to no avail.
Thanks,
Luis
January 28th, 2009 at 19:50
Hi Tombo,
Great Post! Im having a similar issue as Luis tho: Im trying to put a drop shadow on my AspMenu flyouts using transparents .png and .gifs. When I use BackColor=”Transparent” on the tag, the flyouts still have a white background! I’ve tried every css trick/hack under the sun but still havent been able to get my flyouts to render the drop shadows properly. Anyone have any suggestions?
Thanks in advance,
Veysel
January 28th, 2009 at 21:31
Guys,
Adding an extra “background-color: transparent” override should work. You could try overriding the zz1 class directly instead:
.zz1_GlobalNav_0 { background-color:transparent;}
Cheers!
March 10th, 2009 at 1:05
I tried to add the class under “sharepoint :AspMenu” but still nothing happens as my menu is for quick launch. I am not sure where i would add the .zz1_GlobalNav_0 { background-color:transparent;}. Can you please explain this a little more
thank you
May 5th, 2009 at 14:19
The transparency only seems to be a problem in IE7. FIreFox and Safari are working fine for me. I’ve tried overwriting the zz1_GlobalNav_0 class and adding !important so that it overrides inline styles, but IE7 still has the white background. Has anyone finally got it working?
Thanks
Ryan
September 16th, 2009 at 2:04
Would love a solution for this.
It’s easy to get opacity working in a ul li situation, but with the nested tables and divs it doesn’t seem so straight forward.
I can get opacity working in FF but it also makes the text translucent – not ideal.
Halp?
December 2nd, 2009 at 19:31
Did anyone find the solution to the transparency issue? I’m trying to get it to work on my site, but not having any luck.
February 9th, 2010 at 19:44
You could use a JavaScript script to change the background. Use a library like jQuery to work faster.
Good luck!
Tom
February 18th, 2010 at 10:51
I found the solution to ie transparency issue. This is insane, but when you set DynamicMenuStyle WIDTH(!) to zero, it will work! !@#%)!@ing crazy
Solution found here:
http://foundsomehow.kennworld.net/2008/08/how-to-get-transparent-backgrounds-in.html