Designing context menus

One menu format that isn't, at present, available with jQuery UI is that of a context menu; more and more applications rely on the use of context menus for quick access to options, such as formatting content.

It is however a relatively easy configuration to replicate in jQuery. In our next example, we've reused some of the standard HTML markup from the main UI website and turned it into a context menu. It goes to show that, with a little jQuery magic, the markup doesn't actually need to change—a bargain!

Note

For this exercise and the next, you will need a copy of the code download that accompanies this book. We will be using some of the files in the code download.

Once we have created our page, we can view the results in a browser by right-clicking on the image. It should resemble the following screenshot:

Note

The image can be found at http://upload.wikimedia.org/wikipedia/commons/2/25/Coffee_Roasting.jpg.

Let's begin by extracting a copy of menu2.html from the code download...