Skinnable Right-click Context Menu In JavaScript – context-js

Category: Javascript , Menu & Navigation | January 1, 2021
Author:UnrealSecurity
Views Total:623 views
Official Page:Go to website
Last Update:January 1, 2021
License:MIT

Preview:

Skinnable Right-click Context Menu In JavaScript – context-js

Description:

A skinnable, customizable, multi-level context menu library to replace the browser’s right-click menu.

How to use it:

1. Load a skin CSS of your choice in the document.

// 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 in the document.

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

3. Add menu items together with hotkeys to a JS object. Possible properties:

  • text: Menu item
  • hotkey: Hotkey
  • color: Text color
  • disabled: If the item is disabled
  • onclick: onClick evnet handler
  • subitems: Array of sub-menus
  • submenu: ContextMenu instance that will be shown here
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 where you wan to show the context menu on right click, and pass the menu data as the second parameter to the ContextMenu method.

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

5. Activate the custom context menu. Done.

myMenu.install();

6. More API methods.

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

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

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

Previews:

Skinnable Right-click Context Menu Chrome Dark Theme

Chrome Dark Theme

Skinnable Right-click Context Menu Chrome Bright Theme

Chrome Bright Theme

Skinnable Right-click Context Menu Hackerman Theme

Hackerman Theme

Skinnable Right-click Context Menu Kali Dark Theme

Kali Dark Theme

Changelog:

01/01/2021

  • Changed right-click behavior

You Might Be Interested In:


Leave a Reply