If you want your web application to act like a desktop application, you'll need a right-click menu, right?
Right. Here's how.
(It will be called a "contextmenu" from now on. Becuase the invoking attribute is "oncontextmenu").
This technique has been used for several years at planscalendar.com and more recently at flexdirectory.com.
Start with an unordered list
Style it up nice:
Maybe give it a title:
Cause the menuitems to change color on hover.
IE6 does not support :hover on elements other than <a>. So :hover won't work. Instead, use:
onmouseover="context_menuitem_highlight(this)" onmouseout = "context_menuitem_unhighlight(this)"
This tecnhique can be easily swapped with :hover when IE supports it someday.
Next, make things happen when you click the menuitems (go ahead, click them).
Next, set position:absolute and visibility:hidden for the contextmenu
(You can't see it, but it's right here)Finally, make a new element and give it an oncontextmenu="show_contextmenu(event);return false;" attribute.
The show_contextmenu() function shows the menu at the current mouse location.
This relies on some mouse tracking javascript.
All that javascript is here
This code is not packaged up as a drop-in component for an application, or part of a library (the last thing we need is another javascript library).
It's just a technical demo of the easiest way (I think) to do a right-click menu on a web page.
This code does many things wrong - for instance, it doesn't nicely encapsulate things in javascript objects.
I hope it's still useful as a learning example :) Feel free to use this code however you want. It's public domain - no license.
Comments can be left here.