Help styling a menu control in Asp.Net

Question

Hi, I'm trying to put a user control together which will contain a menu control. what i have is a menu that is horizontally oriented, and using 4 gifs as the individual menu items with about 10px of spacing between them. So far easy enough, but what i need is to swap out each gif on hover over. im pretty sure the menu control doesn't support an image-swap-on-hover functionality, so im trying to find a work around. im guessing it will involve some clever css, but im completely stuck and simply can't figure this out. any help?

side question here: i was asked to put the menu in a user control and then register it in the master page. is there a benefit to this? why not just code the menu into the master page instead of in a separate user control?

thank you...

Answer 1

I would suggest using two CSS styles. On your first style you could set a background image for your non-hover state. On the second style you would use a background image for your hover state. You can then use the MenuItemStyles and HoverMenuItemStyles. Here's some quick sample code:

menuItem { background-image: url('menuItemImg.gif'); background-position: left center; background-repeat: no-repeat; } hoverItem { background-image: url('hoverItemImg.gif'); background-position: left center; background-repeat: no-repeat; }

...

<asp:Menu ID="menu1" runat="server" StaticMenuItemStyle-CssClass="menuItem" StaticHoverStyle-CssClass="hoverItem">
    <Items>
      ...
    </Items>
</asp:Menu>

You may need to switch to DynamicMenuItemStyle, etc if you're using dynamic items.

Answer 2

What you can do is combine the method Coding Gorilla mentioned with CSS Sprites. The reason I say this is because if you just replace images the first time users hover over the menu item they will have to wait for the second image to load so it won't trantion smoothly. With the CSS Sprites Technique you load an image that contain both the non hovered and hovered states and just change the position of the image, which makes the experience more smooth.