rightClick

Is rightClick for you?

Users are used to open a context menu whenever they want more options. If you're making a fully immersive web app, then people would hope to see a context menu with some options whenever they right click on an object. This plugin provides an easy way to define context menus for your web app so your users can have the best experience.

See it on Github

How To?

Using rightClick is incredibly easy. Just follow these easy steps

Includes:

<!-- plugin styles -->

<link rel="stylesheet" type="text/css" href="/rightclick.css">

<!-- script files -->

<script src="/jquery.min.js" type="text/javascript"></script>
<script src="/rightclick.js" type="text/javascript"></script>

Building up the menu:

Remember to give your menu a class of .menu for all the cool styles to apply! Also give it a id so we can hook it up with its listener later

<div id="ctx-menu-1" class="menu">
    <ul>
        <li>Stop</li>
        <li>Play</li>
        <li class="disabled">Cocoa</li>
        <li>Butter</li>
        <li>Kisses</li>
        <li>Very long menu item</li>
        <li>Sub Menu
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Very long menu item</li>
            </ul>
        </li>
    </ul>
</div>

Call the plugin:

$('#target1').rightClick('#ctx-menu-1');

Aaaand you're done!

---

Examples

Right click on these two divs to see rightClick.js in action!