CODEWITHSUNDEEP
asp.netcss
400_the_cat
400_the_cat

Reputation: 883

Help styling a menu control in Asp.Net

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...

Upvotes: 0

Views: 1210

Answers (2)

Waleed Al-Balooshi
Waleed Al-Balooshi

Reputation: 6406

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.

Upvotes: 1

CodingGorilla
CodingGorilla

Reputation: 19842

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.

Upvotes: 1

Related Questions