Lightweight Context Menu JavaScript Library – justContext.js

Category: Javascript , Menu & Navigation | May 13, 2016
Author: minxoma
Views Total: 1,977
Official Page: Go to website
Last Update: May 13, 2016
License: MIT

Preview:

Lightweight Context Menu JavaScript Library – justContext.js

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);
}

Leave a Reply