Originally published at: http://www.sitepoint.com/building-custom-right-click-context-menu-javascript/
Web applications, as opposed to just informational websites, are being more and more utilised as the web continues to mature. Two cutting edge and leading examples of web applications are Gmail and Dropbox. As web apps continue to grow in functionality, accessibility, and usefulness, the need to streamline their efficiency also increases. An emerging (and highly useful) concept that’s being utilised by the two formerly mentioned apps is a customised context menu. In this tutorial, we’re going to cover a few things:
- Define what a context menu actually is, and understand its purpose and position in web application architecture.
- Use front-end code to build our very own custom context menu, from styling with CSS, to triggering with JavaScript
- Top it all off with a little discussion on the practicalities of customised context menus, and some do’s and don’ts when it comes to production-level implementations.
Let’s dive in!
What is a Context Menu?
I’ll borrow and tailor a definition from Wikipedia, as it covers it nicely:
A context menu is a menu in a GUI that appears upon user interaction, such as a right-click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. Usually the available choices are actions related to the selected object.
On your computer, right-clicking on the desktop launches your OS’s native context menu. From here, you can probably create a new folder, get some information, as well as other actions. When using a web browser, right-clicking on the page would launch that browser’s default context menu. You’ll be able to get page information, or view the source. Right-clicking on an image presents its own set of options too — you can save an image, open it in a new tab, copy it, among others. These are all default behaviours, but they did get built from the application makers once upon a time. The interesting thing to note here is how the available menu actions change depending on the situation, or context, in which you launch the menu.
Web applications are starting to deploy their own customized context menus to present users with relevant actions. Dropbox and Gmail are perfect examples of this, allowing you to perform actions like archiving, deleting, downloading, viewing, and so on. But how is it done? In a web browser, when a right-click action is performed, an event gets fired. This event is the contextmenu event. To deploy a customized context menu, we’ll need to prevent default behaviour, and then set up, trigger, and position our own menu. It’s a bit of work, but we’re going to do it step by step. Let’s start by creating a basic application structure so that we have something real world-ish to play with.