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! :)

Posted by Rey Bango at 1:15 pm
17 Comments

+++--
3.5 rating from 79 votes

17 Comments »

Comments feed TrackBack URI

very high quality js. i like.

Comment by Alex Egg — August 25, 2007

Very nice, very simple.

Comment by david — August 25, 2007

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.

Comment by emehrkay — August 25, 2007

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.

Comment by Jordan — August 25, 2007

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

Comment by kangax — August 26, 2007

The text on that page no longer has the regular text cursor in Firefox 2.0 Is that because of the script?

Comment by Mike — August 26, 2007

Am I the only one that gets the regular browser context menu, with this js menu underneath the real one?

Comment by Viktor — August 26, 2007

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!?!

Comment by Martin — August 26, 2007

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;
}
});

Comment by Les — August 26, 2007

Really nice implementation, the only con is that CTRL+left click stuff on Opera.

Comment by DWJ — August 27, 2007

@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.

Comment by kangax — August 27, 2007

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

Comment by Les — August 27, 2007

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

Comment by GG — August 27, 2007

Does anyone know how I can reference the ID of the element where the right-click event was called?

Comment by Ronan — October 25, 2007

Hi,
Thanks for a providing this.
Looks like I am almost a year late in noticing this script :)
Anyway,
I ran into a small issue using this in an IFRAME.
I am invoking menu when user clicks on links (I modified code a bit to use left mouse click on IE6+/FF). It works fine so far as page is loaded directly. When I load the same page in an IFRAME though, it fails to invoke the menu.
It seems the mouse click is not intercepted

Do anyone know how to fix this?
Thanks in advance.

Comment by kowadis — August 8, 2008

Hi,
the menu does not work with IE8. it works only in ‘Compatibility view’

Comment by cinis — June 16, 2009

This proto menu overrides browser default behaviour, means showing options like copy,paste,view source on right click.
How to avoid this problem?
Please suggest me

Comment by shyamkkhadka — August 19, 2009

Leave a comment

You must be logged in to post a comment.