Styleable context menu in pure

justContext.js

justContext is a simple context menu plugin that doesn't require jQuery, but kicks ass anyway. Here are some of the features:

Just about 30 lines of JS and a bit CSS Context menus can be styled. Two themes are included, plus three themes for drop shadow effects (off, light and dark) Create unlimited context menus, every HTML element can host it's own, unique menu Single elements can be disabled and are styled accordingly Menus are auto-positioned relative to the mouse position and window dimensions Menu do have fade-in and fade-out effect (again, no jQuery) Support for fontawesome icons is built-in

justContext.js is featured at Unheap and cssscript.com.

Getting Started

Including

View the demo here. All browsers but IE are supported. Include justContext in your website.

Styling

Include the CSS for justContext. Either write your own, or just download a pre-configured one from here. Modify the HTML element you want to host a context menu on and give it a unique ID. For example:

<p class="jctx-host jctx-id-foo">Right-click this</p>

jctx-host marks a hosting element. foo is the unique ID for this menu.

Creating

Now create the actual menu. We use the black theme here, and a drop shadow:

<ul class="jctx jctx-id-foo jctx-black jctx-black-shadow"> <li data-action="cut">Cut</li> <li data-action="copy">Copy</li> <li data-action="paste">Paste</li> <hr> <li data-action="new_pkg">New package</li> <li data-action="new_cls">New class</li> <li data-action="new_intf" class="disabled">New interface (a disabled entry)</li> </ul>

The jctx styles and hides the menu. The unique ID is re-used here to identify the parent. The data-action attribute of each menu entry is the string that is passed to the action handler when an entry is pressed.

Action Handling

Define your action handler. A simple example that just displays the passed action is:

<!-- Defining a sample action handler (for all menus) --> <script> function handleMenuAction(evt) { alert("Action required: " + evt); } </script>