SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color

Search:

This is small, but gets me all of the time. When you are working with the Global Navigation (a.k.a. Top Nav Bar) in SharePoint and you are using 2 levels of flyout menus, the arrow that appears for the second level of items may show the wrong background color when you hover over the item or arrow.

As you start to alter the various colors and styles in the menu code, the background color behind the arrow does not reflect your changes or seem to pick up any styles from parent elements. Here is an example of this happening.

By default, the SharePoint menu code in the master page manually specifies a color for this hover effect:

<SharePoint:AspMenu ..... lots of properties.... DynamicHoverStyle-BackColor="#CBE3F0" >

You don't have to replace the color or specify a style, just delete the property and your colors will shine through.

<SharePoint:AspMenu ..... lots of properties..... >

This does require edits to the master page, there is no CSS class specified, so you can't change this with CSS only.

posted on Friday, July 25, 2008 3:04 PM

Comments

# re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Erik Swenson
Posted @ 7/26/2008 8:40 PM
Actually, if you wanted to use just CSS you could use the following:

.ms-topNavFlyOutsHover{
background-color:#FFCC00 !important;
color:#000000;
}

Simply use the "!important" tag and the background color will be forced behind the arrow.

But... Since you are already creating a custom master page to set the MaximumDynamicDisplayLevels you now have 2 options.
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Bryan Yamanaka
Posted @ 7/27/2008 12:12 PM
Heather, I am having a tough time getting the dynamic flyouts in the quick launch bar to have their background transparent so I can see through the the underlying text in the main content area. I have tried various CSS modifications to allow opacity and the "filter" opacity. Nothing seems to work. Is there a definition somewhere in the JS that controls the flyout that is setting the background to not allow transparency?
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Celina Baginski
Posted @ 7/29/2008 3:58 PM
Great tip, good to know!
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Janine Kleynhans
Posted @ 9/30/2008 10:46 PM
Hi There

I'm trying to change the black arrow image that is displayed in the menu mentioned here. any idea where I can find it / what css is applied to it?

When you click on the image - it is show as webresource.gif, but I can find no such image, nor reference in the css for it.

Any ideas?
thanks for all the great info!
Janine
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Paul
Posted @ 10/10/2008 4:11 PM
Janine,
I'm having the same issue as you. I have made a white arrow graphic, now I don't know where to put it.

Paul
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
Paul
Posted @ 10/10/2008 4:33 PM
Janine,

In case you never found this information: I found how to replace the image. It is scripted in in the <asp:menu> tag. The attributes that control it are StaticEnableDefaultPopOutImage or DynamicEnableDefaultPopOutImage and StaticPopOutImageUrl or DynamicPopOutImageUrl.

Frameworks sometimes seem like nothing but secret handshakes. I guess that's how their creators make so much money in training.

Paul
re: SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color
cloudno9
Posted @ 11/17/2008 9:27 AM
Great tip...
One thing heather. Once i click on the submenu item and view the site. the top navigation does not show me the sub menus again. am i missing something?
TIA

Title
Name
Email (never displayed)
Url
Comments
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Remember Me?
Please add 8 and 5 and type the answer here:

Blog Stats:
Posts - 377
Stories - 38
Comments - 1556
Trackbacks - 182