Lightweight Context Menu JavaScript Library – justContext.js

Preview:

Description:

justContext.js is a tiny JavaScript library that binds a highly customizable and easy-to-style context menu on the right click event.

Key features:

• 2 built in themes: black and white.
• Fade in / out animations.
• Auto position to fit your screen size.
• Lightweight and easy to use.

How to use it:

Load the justcontext.css and justcontext.js in your html document.

<link href="justcontext.css" rel="stylesheet">
<script src="justcontext.js"></script>

Create an area where the context menu should appear.

<div class="jctx-host jctx-id-demo">Right-click Me</div>

Add custom links to the context menu and specify the action using the ‘data-action’ attribute.

<ul class="jctx jctx-id-demo jctx-black jctx-black-shadow">
    <li data-action="back">Back</li>
    <li data-action="forawrd">Forward</li>
    <li data-action="refresh">Refresh</li>
    <hr>
    <li data-action="save">Save As</li>
    <li data-action="print">Print</li>
    <li data-action="disable" class="disabled">Disabled Item</li>
</ul>

Change the default theme to ‘White’

<ul class="jctx jctx-id-demo jctx-white jctx-white-shadow">
    <li data-action="back">Back</li>
    <li data-action="forawrd">Forward</li>
    <li data-action="refresh">Refresh</li>
    <hr>
    <li data-action="save">Save As</li>
    <li data-action="print">Print</li>
    <li data-action="disable" class="disabled">Disabled Item</li>
</ul>

The JavaScript to handle your custom actions.

function handleMenuAction(evt) {
  alert("Action required: " + evt);
}