Context Menus in Web Application using JavaScript
There are many instances in web development where we have the technology to do something - but we willingly chose not to do it. Context Menus in a web page is one such technology. Implementing a context menu(also known as the right click menu) is relatively simple - but very few apps use it. This is because the users don't expect a right click menu. At least, not yet. I want to re-evaluate our stand on this issue - I want to ask the question - "Are we ready for the Context Menu in Web Apps?"
There are a few apps that use right click menus - off the top of my head, I can think of the following...
I am sure that there are many more apps out there that use right click. But most(if not all) web usability experts will have a seizure if they hear 'context menu' and 'web application' in the same sentence. And they have good reason to hate the idea - most people don't expect a right click menu in a web application.
But, in my opinion, this is changing. The gap between web apps and desktop apps are closing - and people are expecting the features of a desktop application in a web application. Have you ever right clicked on an element in a web page instinctively expecting a context menu(ie. a non-browser menu)? I have - plenty of times.
This is the point where I stop - I am not a UI expert. I don't have the resources to do a usability study on this issue. But there is one thing I can do - create a library that will implement a context menu. So, without further ado, my latest library...
ContextMenu
This library lets you create context menus(or right click menu as some call them) in your web pages. This menus shows up when a user right clicks on the page. You can specify any list as the menu. You can also set a context for the menu - or use the document for a global menu. This library supports multiple context menus for different contexts.
Before going any further, a word of warning. Just because you can don't mean that you should. Think long and hard before using this in any of your projects. This is kinda unexplored territory - and pioneering is risky. If your are using the context menu in a web app, make sure there is another way to access the operations specified in the context menu.
Code/Download
Demo
A Demo of the ContextMenu in Action
Works In
- Firefox 2+
- IE 6+
Anyone have an idea on how to implement this in Opera? I can't seem to get it working no matter what I try.
ContextMenu Documentation
Usage Example
<!-- The area to show the special menu -->
<div id="context-area">
This area can be right clicked to get a different menu.
</div>
<!-- The First Menu(Global) -->
<ul class="context-menu" id="global-menu">
<li><a href="http://www.openjs.com/">Go to Home</a></li>
<li><a href="http://www.openjs.com/scripts/ui/context_menu/">Go to Context Menu Page</a></li>
<li class="disabled"><hr /></li>
<li class="disabled">Disabled</li>
<li><a href="javascript:viewSource();">View Source</a></li>
</ul>
<!-- The second Menu(Special) -->
<ul class="context-menu" id="special-menu">
<li><a href="javascript:alert('Hi There');">Alert</a></li>
<li>Nothing</li>
</ul>
<!-- The JS Code that binds the menus to the right click. -->
<script type="text/javascript">
ContextMenu.set("menu-id"); //Please use the same order if you want to override your global menu with another.
ContextMenu.set("menu-element-id", "context-element-id");
</script>