2.0 Menu Difficiency

[CMM]

The menu control in ASP.NET 2.0 is pretty cool... but there's seems to be a
fairly glaring oversight in it. Only the text is clickable... the
surrounding area of the menu is not clickable even though it responds to
"hover." This is very user-unfriendly and is most noticeable when you orient
the menu vertically and when a menu item has text in it that is considerably
shorter than the other items.

The control uses tables to render the menus... and the HTML for a menuitem
looks like this when rendered:
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)" id="Menu1n0">
AFAIK <TD> supports "onlick" so there's no reason why the control omits this
functionality.

 

[Flinky Wisty Pomm]

If the text renders as a hyperlink (and I'm assuming it does) then you
can fix this with a CSS hack - apply a class to your menu and do

..MenuCssClass td a
{
display: block;
}

the entire cell will now be filled by the link's clickable, hoverable,
tool-tippable area. Joy.

 

[CMM]

Nice!
Setting this causes IE to honor the "padding: " setting differently... but a
few quick adjustments fixed it. It works well. Thank you!

 

[CMM]

And just to add... this solution makes the problem less noticeable but
doesn't solve it. Unless the menuitem padding is set to 0 there is still an
area that is non-clickable.

Microsoft could easily simply fix this (what I would call a BUG) by emitting
an "onclick" for the menuitem HTML (it's just a nested table) to compliment
the NavigateURL or postback for the Hyperlink... just like it already does
for "onmouseover" and "onmouseout."

 

[CMM]

Well, there's a workaround for that too. Interestingly an Anchor can have
"Padding" as well (I didn't know that)... so if you remove the padding from
the MenuItem class and add it to the anchor class as so:
..MenuCssClass td a
{
display: block;
padding: 6px;
}
It works perfectly and there's only about a one pixel hoverable yet
unfortunately non-clickable area (the border of menu). But the quirk is very
negligable at this point.

 

[Flinky Wisty Pomm]

I would guess that the remaining non-clickable area is margin.

try

display: block; height:100%; margin: 0;

and see if that does you any good. Block displayed hyperlinks are
marvellous little beasties for building menus with. Once an element is
block displayed, it will pad/margin/border in the same way as any other
block level element. If you take the block declaration away, it will go
back to behaving as you expect a link to.

 

[CMM]

Thank you for the tip. It works beautifully.