SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Forums
SiteExperts.com Forums
All Discussions

SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : Dynamic HTML :

Previous DiscussionNext Discussion
 fly-out menu usability problem

I think every web-based fly-out menu that I've used has the problem that it expects people's mouse skills to be accurate.

Consider a menu system that has 3 levels. Each item in Level 1 and Level 2 causes fly-out sub menus. The use expects this, and such will get used to moving the mouse to the right in order to use those menus. As they mouseover one of the Level 2 menuitems the Level 3 menus will appear, and as such they might try to move their mouse to the third level.

I found this fly-out menu on a CSS site, but it operates in the same way as most. Click here to open it up. It uses the :hover psuedo event in CSS (and a hack to make it work in IE using javascript events).

The issue is that people will try to anticipate the menu item they want to get to - in the image above it's "adipiscing > dolor > ipsum", and their mouse may not follow the required angular (red) path that is needed and accidentally mouse over a different menu item (green) that would also cause a fly-out menu (e.g. "vestibulum", in the image above) to appear. This then causes them to pause, re-position the mouse pointer to hide the wrongly opened submenu, and then wait for the correct submenu to appear (as shown in the path below). In complex menu systems this becomes a major annoyance because it requires relatively exact mouse positioning skills on part ot the operator.

Has any one seen a good solution that allows curved mouse paths that temporarily cross event boundaries for fly out menus? The problem with :hover psuedoclasses is that the event fires independantly of any control via script, so a scripting solution would have to be the go.

Started By frumbert on Jan 15, 2007 at 5:55:35 PM

7 Response(s) | Reply

Earlier Replies | Replies 2 to 7 of 7 | Later Replies
Goto Page: 1
cdrom600 on Jan 20, 2007 at 2:57:02 PM (# 2)

I can't think of an implementation of one off the top of my head, but I'd say CSS is not an option. Use JavaScript and add a timeout (probably 300 or 400 ms) before a menu change is activated.
Incidentally, this is how the Windows start menu works, for the exact same reason.


BachusII on Jan 21, 2007 at 8:53:14 AM (# 3)

5-10px left transparent border? left margin? transparent container with left padding?


ctcrmcou on Jan 21, 2007 at 3:49:18 PM (# 4)

exactly why a click on a menu should open its sub menu.  simply place an arrow to the right to indicate there's more.  if the user navigates over the arrow, the fly out can occur, since they traveled the desired path at that point.


pivert on Jan 22, 2007 at 12:17:44 AM (# 5)

I'm replacing my js-based (brattli) menus with a css based one I found on http://www.seoconsultants.com/css/tips/#cssmenus. It does the job and is easily maintainable. HTH. P.


cdrom600 on Jan 22, 2007 at 12:30:40 PM (# 6)

I like BachusII's solutions; I hadn't considered those. I suppose that you could achieve the desired effect here with CSS.

@pivert:
That menu still has the issue we're discussing here.


pete142 on Jan 23, 2007 at 3:03:37 AM (# 7)

Also: css-only menus and many other useful no-js things:

http://www.cssplay.co.uk/menus/index.html

-- pete


Earlier Replies | Replies 2 to 7 of 7 | Later Replies
Goto Page: 1

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password
Copyright 1997-2004 InsideDHTML.com, LLC. All rights reserved.