Overlay Menu

Problem

Users need to access the main navigation of the site

Solution

Present the menu at the mouse pointer location after the users click

From www.nickad.com/


Use when

The site is not very complex and using the entire screen estate is important for the design of the site. Typically, the site is a site with a highly creative and artistic flavor such as an Artist Site. The site structure must be fairly small and does not need explicit clarification or visibility to the users.

How

The menu is closed and only a "menu" label is FOLLOWING the mouse pointer! This could be the word menu or some other kind fo visual artifact. When the user selects the "menu" it opens up at the position of the user's mouse pointer. Then a 'normal' type of Main Navigation appears. Typically a or a vertical/horizontal menu.

Why

The idea the the navigation is not placed at a fixed location might be confusion for users at first. So it is not suitable for highly informative sites. However, the menu is always there when you need it and placed where you want it. It is an uncommon way to do the menu and that may be exactly what some sites need!

More Examples

At the
Manhattan Loft site a similar floating 'on-click' menu is used:

At Lineto a slightly different overlay menu is used. In this case, the menu is overlaid and moveable but it does not appear 'on-click' because it is always there.




plml logo

Comments

2 comments have been added to this pattern


Predrag Stojadinovic, 25th August 2007
http://www.nolimitmagic.com is unavailable (24th Aug. 2007)
Martijn van Welie, 29th August 2007
Thanks letting me know. I found an other example so I put that in. If anybody knows of more examples let me know...this one is kind of rare!


Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name

Comment

Enter the verification code you see in the image below
captcha