Menu control - hover area vs link area

[jacgec]

I am trying to use the new ASP.NET 2.0 menu control to replace functionallity of an existing JavaScript sidebar menu. I have menu items which are black text/white background, and when you hover over them, they change to black text/yellow background.

In my existing code, when you hover over the menu item, you can click anywhere inside the yellow background, and navigate to a link.

Trying to replicate this in ASP.NET 2.0 with the menu control, I can hover over the same area & get yellow background, but I can only navigate to the link if I click directly on the text area.

Is there any way to make the menu control accept clicks from anywhere inside the hover area, and not just on the text?

Any assistance would be appreciated.

 

[jacgec]

I found my answer. The code below allows me to click anywhere in the highlighted (yellow) area when hovering over the menu (not just on the text):

<asp:Menu ID="m1" runat="server" Orientation="horizontal">
<StaticItemTemplate>
<div style="width:100%;">
<asp:HyperLink
ID="l1"
runat="server"
Text='<%# Eval("Text") %>'
NavigateUrl='<%# Eval("NavigateUrl") %>'
BackColor="Yellow"
Font-Underline="false" />
</div>
</StaticItemTemplate>
<DynamicItemTemplate>
<div style="width:100%;">
<asp:HyperLink
ID="l2"
runat="server"
Text='<%# Eval("Text") %>'
NavigateUrl='<%# Eval("NavigateUrl") %>'
BackColor="Yellow"
Font-Underline="false" />
</div>
</DynamicItemTemplate>
</asp:Menu>

 

[jbenson001]

What exactly did you change in your code to allow the click event to fire anywhere?

Thanks..
Jim

 

[jacgec]

The templates were the key. I originally had the default template:

<StaticItemTemplate>
<%# Eval("Text") %>
</StaticItemTemplate>
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>

Chaning this to a DIV w/ WIDTH="100%", and inserting an <asp:HyperLink> inside the DIV allowed me to click the full width of the menu item, regardless of how long the text was inside that menu item.

 

[jbenson001]

Great .. thanks for sharing the code.