Menu Items on hover clickable area
-
Hello everyone! I have an asp:menu item in which the background color changes during a static and dynamic hover style. Everything looks great, however I have noticed that many of my users are mislead into thinking the whole area is clickable when in reality the anchor will only work if the mouse is over the text of the link. Is there a trick to changing the clickable area to take up the whole "background" that is changing rather than just the text? I've googled around but can't seem to find what I'm looking for. Thanks in advance!
"You're damned if you do, and you're damned if you dont" - Bart Simpson
-
Hello everyone! I have an asp:menu item in which the background color changes during a static and dynamic hover style. Everything looks great, however I have noticed that many of my users are mislead into thinking the whole area is clickable when in reality the anchor will only work if the mouse is over the text of the link. Is there a trick to changing the clickable area to take up the whole "background" that is changing rather than just the text? I've googled around but can't seem to find what I'm looking for. Thanks in advance!
"You're damned if you do, and you're damned if you dont" - Bart Simpson
It sounds like you need a CSS fix for this. Here's some code I have for a CSS button. I'm not a css expert, but I believe it's the "display:block;" that does what you're looking for:
ASPX:
<asp:Hyperlink ID="lnkDefaultButton" runat="server" CssClass="defaultButton" Text="Button" Width="200" Height="20"/>CSS:
a.defaultButton { background-color:white; width:200px; height:20px; display: block;outline: none;}
a.defaultButton:hover { background-color:black; width:200px; height:20px; display: block;outline: none;}Does this work? -Goalie35
-
It sounds like you need a CSS fix for this. Here's some code I have for a CSS button. I'm not a css expert, but I believe it's the "display:block;" that does what you're looking for:
ASPX:
<asp:Hyperlink ID="lnkDefaultButton" runat="server" CssClass="defaultButton" Text="Button" Width="200" Height="20"/>CSS:
a.defaultButton { background-color:white; width:200px; height:20px; display: block;outline: none;}
a.defaultButton:hover { background-color:black; width:200px; height:20px; display: block;outline: none;}Does this work? -Goalie35
Hi Goalie35, no, that didn't seem to do the trick. I'm wonder if there's something within the asp:menu item that's overriding the css class? <pre> <asp:Menu ID="Menu1" runat="server" DataSourceID="siteMapDataSource" DynamicHorizontalOffset="2" Font-Names="Tahoma" Font-Size="11px" StaticSubMenuIndent="10px" style="background-color: transparent; font-weight: bold; vertical-align: top; margin-bottom:30px; background-image: url(/designElements/interfaceImages/menubkg_new.jpg);" Width="152px" ForeColor="#666666" DynamicEnableDefaultPopOutImage="False" DynamicPopOutImageUrl="~/designElements/interfaceImages/menuarrow.gif" StaticPopOutImageUrl="~/designElements/interfaceImages/menuarrow.gif" Height="275px" CssClass="pointer" EnableTheming="False"> <DynamicHoverStyle BackColor="#8E8E8E" ForeColor="White" /> <DynamicMenuStyle CssClass="adjustedZIndex" BackColor="#D1D1D1" /> <DynamicSelectedStyle BackColor="#D1D1D1" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="5px" /> <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="3px" ItemSpacing="1px" /> <StaticMenuStyle BackColor="#D1D1D1" /> <StaticHoverStyle BackColor="#8E8E8E" ForeColor="White" CssClass="pointer" /> </asp:Menu> the pointer cssclass just has cursor: default; in it, but that's where I was adding the display:block and then creating a.pointer{ display:block;} but still not doing the trick.
"You're damned if you do, and you're damned if you dont" - Bart Simpson