Chapter 7 DynamicMenuItemStyle not working

robbiethompson73 · October 18th, 2010, 05:43 AM

Hello,

I am having a problem making the DynamicMenuItemStyle class work on the Monochrome menu. When you hover the mouse over a main menu, the submenus appear showing white text on a light grey background which is correct. However, when you hover a mouse over a submenu, its background color does not change - the background remains light grey rather than displaying the darker gey of #707070.

The menu code is:

Code:

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                    
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
                                        
</asp:Menu>

The CSS code that is relevant to the menu is written as

Code:

.StaticMenuItemStyle, .StaticMenuItemStyle a 
{
	/* Defines the look of main menu items. */
	color: #707070;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	padding-left: 2px;
}

.StaticHoverStyle, .StaticSelectedStyle
{
	/* Defines the look of active and hover menu items */
	background-color: #c1e4ce;
}

.DynamicMenuItemStyle
{
	/* Defines the sub menu items */
	font-size: 14px;
	color: #707070;
	background-color: #cccccc;
	padding: 4px 2px 4px 3px;
}

.DynamicHoverStyle
{
	/* Defines the hover style of sub menus */
	background-color: #707070;
	color: White;
}

.DynamicHoverStyle a
{
	/* Removes the underline from links in the sub menus */
	text-decoration: none;
}

No matter what values I place within the .DynamicHoverStyle and .DynamicHoverStyle a classes, there is no effect in the browser. Don't think there are any typos or mistakes but I could be wrong?

I am using VWD 2010 rather than 2008 should that make a difference. And viewing it in FireFox 3.6.10 and IE 8.

Any help with this issue will be gratefully received.

Regards

Robbie

Imar · October 18th, 2010, 05:54 AM

Hi Robbie,

Quote:

I am using VWD 2010 rather than 2008 should that make a difference.

Yes, it does, as in ASP.NET 4 (which is what I assume you're using) the menu renders completely different code.

You can set the rendering compatibilty to 3.5 in web.config like this to force 3.5 behavior:

Code:

 
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>

Alternatively, you can download the code from the 4.0 book and look at its source for the menu to see how it's done.

Cheers,

Imar

kiwibrit · July 27th, 2011, 12:45 PM

Quote:

Originally Posted by Imar

Hi Robbie,

Yes, it does, as in ASP.NET 4 (which is what I assume you're using) the menu renders completely different code.

You can set the rendering compatibilty to 3.5 in web.config like this to force 3.5 behavior:

Code:

 
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>

...........

I transferred a site to a web host using 4.0 - and needed a temporary fix to overcome a menu problem, pending a proper sort out, and came across this thread.

Imar's solution worked fine - once I dropped it into the <system.web> section. Obvious really, but it caught me out for a minute or two (it's been a while since I worked in asp.net) and, as this is a beginner's book, I thought I'd drop a note in here, in case anyone got stuck with a similar problem.

PS I had needed an App_Browsers file for the Safari browser when the site was hosted in real 3.5. In 4, it was no longer needed for good rendition in Safari, and indeed the file had to be excluded.