David Walsh’s ContextMenu Plugin
Over on David Walsh’s blog today he has a new plugin he’s releasing called ContextMenu:
ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools javascript framework. ContextMenu allows you to offer stylish, functional context menus on your website.
You just create a list group with your menu:
<ul id="contextmenu"> <li><a href="#edit" class="edit">Edit</a></li> <li class="separator"><a href="#cut" class="cut">Cut</a></li> <li><a href="#copy" class="copy">Copy</a></li> <li><a href="#paste" class="paste">Paste</a></li> <li><a href="#delete" class="delete">Delete</a></li> <li class="separator"><a href="#quit" class="quit">Quit</a></li> </ul>
and style it like any other css content. Then create your context menu:
window.addEvent('domready', function() {
//create a context menu
new ContextMenu({
targets: 'a', //menu only available on links
menu: 'contextmenu',
actions: {
copy: function(element,ref) { //copy action changes the element's color to green and disables the menu
element.setStyle('color','#090');
ref.disable();
}
},
offsets: { x:2, y:2 }
});
});
And voila!
Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.
January 28th, 2009 at 10:57 pm
There is similar one here:
http://webhike.de/labs/ddmenu/
January 29th, 2009 at 12:35 am
Too bad it don’t work in Opera (and other browsers that don’t allow overriding the menu/right click as default, though it’s changeable in the preferences in Opera at least)..
Should learn a bit from ddmenu, and add ctrl+click as an alternative, and also maybe give the option to switch between right- and left-click.. (I can actually see a few cases where that would come in handy)
Guess this should have gone in the comments at dawidwalsh.name, but no comment fields on the blog post.. so..
January 29th, 2009 at 8:38 am
I disagree Jens.
If you take a look at the options in my menu class, I provide a “trigger” option which allows you to determine which event you would like the menu to display on. You could display it on the “click” event if you wanted (obviously I don’t recomment that).
I would NOT use control+click because that would prevent me from opening a link in a new window. I think double-click would be better as it has no real purpose inside the browser.
January 30th, 2009 at 12:31 am
Good point, David.
I didn’t connect the “trigger option” to “event type” when I skimmed the code..
That small tidbit makes the whole class a lot more versatile. Guess ddmenu has something to learn from you then :)
I see your point with ctrl+click, doubleclick would be a better way obviously.
(using opera by default, ctrl+shift+click for new window, didn’t remember FF and ctrl+click there..)
How about making trigger support array?
That way you could have contextmenu AND doubleckick as a backup..
January 30th, 2009 at 9:18 am
My suggestion was that the trigger option should be a function. That way I could define things like, say, right clicking only on images brings up the menu, or only images inside divs with a specific class, but only if the user has checked a box. Or whatever.