Press "Enter" to skip to content

Skinnable Right-Click Context Menu Library for Web | context-js

Context.js in the context menu library for the web and of course written in JavaScript. A multi-level, customizable, and skinned context menu library to replace the browser right-click menu.

jquery right click context menu example, jquery context menu, javascript context menu, jquery context menu dynamic items, custom right click menu, jquery context menu example

How to make use of it:

1. Load pores skin CSS of your alternative within the doc.

// Chrome Dark
<link rel="stylesheet" href="./context/skins/chrome-dark.css" id="skin" />

// Chrome Light
<link rel="stylesheet" href="./context/skins/chrome-bright.css" id="skin" />

// Hackerman
<link rel="stylesheet" href="./context/skins/hackerman.css" id="skin" />

// Kali Dark
<link rel="stylesheet" href="./context/skins/kali_dark.css" id="skin" />

// Or your own skin
<link rel="stylesheet" href="./context/skins/custom.css" id="skin" />

2. Load the context.js script within the doc.

<script src="./context/context.js"></script>

3. Add menu objects along with hotkeys to a JS object. Possible properties:

const menuData = [
      {text: 'Back', hotkey: 'Alt+Left arrow', disabled: true},
      {text: 'Forward', hotkey: 'Alt+Right arrow', disabled: true},
      {text: 'Reload', hotkey: 'Ctrl+R'},
      null,
      {text: 'Save as...', hotkey: 'Ctrl+S'},
      {text: 'Print...', hotkey: 'Ctrl+P'},
      {text: 'Cast...'},
      {text: 'Translate to English'},
      null,
      {text: 'View page source', hotkey: 'Ctrl+U'},
      {text: 'Inspect', hotkey: 'Ctrl+Shift+I'},
      null,
      {text: 'Kali tools', hotkey: '❯', submenu: subMenuArray},
      {text: 'Skins', hotkey: '❯', submenu: subMenuArray}
]

4. Create a new context menu instance, determine the place you want to point out the context menu on right-click on, and move the menu data.

const myMenu = new ContextMenu(document.body, menuData);

5. Activate the customized context menu.

myMenu.install();

6. More API strategies.

// destroy the context menu
myMenu.uninstall();

// hide the context menu manually
myMenu.hide();

// show the context menu at specific position
myMenu.show(x, y);

Skinnable Right-click Context Menu In JavaScript, Context JS Plugin/Github, html context menu, bs context menu

Context-Menu-Demo


See Demo And Download

Official Website(UnrealSecurity): Click Here

This superior jQuery/javascript plugin is developed by UnrealSecurity. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.