Saturday, August 25th, 2007
Proto.Menu: Prototype-based Context Menu Solution
Category: Prototype
To round off the weekend, here’s a very cool Prototype-based solution for creating context menus:
Description
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page
Features:
- Lightweight: ~2 KB (~1.5 KB minified)
- Unobtrusive: Plays nice with JS turned off, uses its own namespace
- Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
- Fully customizable: Menu styling can (and is intended to) be easily defined in external stylesheet
- Fast: Menu container is rendered on page load, and only changes position on click
Specification
- Requires: prototype.js 1.6.0_rc0
- Tested browsers: Firefox 1.5+, Internet Explorer 6+, Safari 3+, Opera 9+, Netscape Navigator 9+
- Last modified on: 8/22/07
- Latest version: 0.5
- Author: kangax
It’s lightweight, cross-browser and looks very easy to implement. If kangax can throw in some more default themes, that would be very sweet! Overall, me likey! :)
3.6 rating from 48 votes
very high quality js. i like.
Very nice, very simple.
Nice, but when things break a user’s typical UI behavior (right-click copy paste and such) It typically isnt a good thing. Hopefully devs who choose to use this will consider those things, like Google did with their right-click menus.
How can I customize it to have a “rounded corner” look? It doesn’t create additional DIVs for me to set background images on.
And not to be picky but isn’t Safari 2.0 an A-Grade browser? It’s the only non-beta version of Safari bundled on Macs.
Jordan,
You can’t modify container layout via current API. I just wanted to keep it as simple as possible :)
I’m thinking about adding option to specify className for each link - that will allow to create image based links (to give them more of a desktop look)
As far as Safari 2.0 - I unfortunately am not able to test it on that browser, and that’s the only browser I didn’t test (so I guess it was a little foolish to claim full A-Graded support)
I would definitely like to fix whatever it is that Safari 2.0 doesn’t like, if somebody could point to the right direction.
Cheers,
kangax
P.S. I’m glad people find this script useful, I’ll be definitely working on it
The text on that page no longer has the regular text cursor in Firefox 2.0 Is that because of the script?
Am I the only one that gets the regular browser context menu, with this js menu underneath the real one?
Thanks for the script, that can be useful.
I would drop the fade in. It gets annoying for the user to wait (see navigating the Windows XP start menu). This is what OS X gets right. Show immediately and fade out (fast), Windows does it the other way around and it is not effective.
Note: Opera in OS X shows the menu on Command + click.
But what confuses me most is that it shows the menu at all in Firefox. I do NOT have the option “Allow scripts to disable or replace context menus” checked, so the script should not be able to replace the context menu!?!
This is a very nice menu… and I’m planning to use it.
Just one very minor suggestion: Prototype 1.6 provides a simpler way to create classes, so you don’t have to use ‘Proto.Menu.prototype =’.
See an example below:
var Animal = Class.create({
initialize: function(name) {
this.name = name;
},
eat: function() {
return this.say(”Yum!”);
},
say: function(message) {
return this.name + “: ” + message;
}
});
Really nice implementation, the only con is that CTRL+left click stuff on Opera.
@Mike
The cursor style is changed with CSS, so you’re free to choose any you want.
@Viktor
Can you tell which platform/browser you’re using? The browser menu should not interfere with the JS one (since default “contexmenu” event behaviour is being blocked)
@Martin
Yes, fading, indeed, could be annoying that’s why I made it completely optional. If you specify ‘fade: false’ option, menu will be appearing immediately.
@Les
Thanks, Les. This is exactly how I’m defining a class in a new version of a script (0.6). There are also few speed improvements coming, so stay tuned : )
@DWJ
Unfortunately, Opera does not allow to block browser’s context menu, nor does event prevention seems to work, therefore this ugly workaround.
kangax, I’ll be looking forward to release .6 :)
Also, I think it would be helpful if the callback had and argument with mouse position info (left and top).
Thx,
Les
The script works with my firefox (v2.0.0.6) even when I turned the “disable script to replace context menu” options on.
It seems that is a bug of firefox/mozilla …
Bug 330756
Does anyone know how I can reference the ID of the element where the right-click event was called?