If you’ve ever used the dropdown menu, you’ve probably been impressed by how spiffy it is. Earlier today, however, I noticed a slight annoyance that is made worse by Kirupa’s icon choice.
[SIZE=7]The problem[/SIZE]
[hr][/hr]
[SIZE=7]Solved?[/SIZE]
[hr][/hr]
Do you see the difference? If not, this might help:
[SIZE=7]Explanation[/SIZE]
Basically, the mouse cursor in the “problem” example leaves the hit area for the menu while it’s on its way to hover over a submenu item because there’s a vertical and horizontal gap on the path that the mouse takes.
When I first noticed this happening to me, I think I was veering my mouse over to the right side so much because of these guys:
,
, 
,
. I expected another submenu to pop out where the arrow was pointing, so I wanted to hover over the “Animation” button as far to the right as possible so I could continue onto the one that would appear next.
Plus, if you believe in Fitts’ Law and the related work about pointing vs. steering tasks, people will probably be more efficient at clicking on your menu item if they can move the mouse in a straight line and get to it rather than steering it down a virtual tunnel (down and then right, if the next submenu actually existed).
[hr][/hr]
[SIZE=7]A solution in CSS[/SIZE]
Overall this is a pretty minor thing (and it’s been fixed in Mac OS for decades and on amazon.com for years). But, the reason I spent a while trying to fix it on kirupa.com was that I wanted to fix it without using JavaScript. So far all of the [URL=“https://github.com/kamens/jQuery-menu-aim”]examples I’ve seen have used JavaScript and ‘mousemove’ handlers.
At least for the special case of the kirupa.com menu, the CSS to fix it is pretty short:
#tutorialsLink:hover::before {
content: url("data:image/svg+xml;utf8,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100' height='50' fill='red' fill-opacity='0.5' /></svg>");
position: absolute;
left: 39%;
transform: rotate(45deg); /* -webkit */
z-index: 0;
opacity: 0; /* toggle off to see red the box */
top: 47%;
}
(The z-index line is to let the invisible box slip under the neighboring ‘forums’ button even if it’s accidentally too big.)
Some caveats:
[LIST]
[]Firefox doesn’t seem to like SVG in data URIs. Or maybe it doesn’t like non-Base64 or URI-encoded data URIs. You can fix that by using a PNG instead of SVG (or Base64 encode the URI, if you’re less lazy than me).
[]IE11 doesn’t seem to like CSS that uses data URIs inside ::before pseudo-elements. Or something like that. This is probably fixable if you’re willing to plop down a void element in your HTML to style upon :hover. I lost patience after I crashed the IE10 dev tools and spent an hour upgrading to Windows 8.1.
[*]I’m using some hand-tuned, arbitrary-seeming values like 39%, 47%, 100, 50, and 45 in the code above. There’s probably a better way (using actual CSS units or data from the elements in question), but I gave up on it when I was having trouble scaling some SVG shapes so that their aspect ratio wouldn’t be preserved.
[/LIST]
[hr][/hr]
[SIZE=7]Alternative steering tunnel[/SIZE]
You can probably also imagine wanting an alternative shape for the invisible hit area. In particular, you probably want to cover the worst possible path someone could take when moving from ‘learn’ to the right edge of ‘Animation’, as illustrated by the dotted red line below:
…but you run into the obvious problem of the grey dotted line: people might also want to click the ‘forum’ button. This is fixable, too, you just need to add a timing/delay component. Some menu setups are implemented this way (try Edit > Find > Use Selection for Find slowly and then quickly in OS X). I didn’t implement this in CSS, but it seems like you could do it without resorting to JavaScript by using a timed animation when you hover off of a button’s hit area.
