Author: | Robot-Inventor |
---|---|
Views Total: | 496 views |
Official Page: | Go to website |
Last Update: | July 3, 2021 |
License: | MIT |
Preview:

Description:
A dynamic, animated, good-looking context menu JavaScript library inspired by Microsoft Fluent Design.
How to use it:
1. Load the minified version of the context menu.
<script src=”context.min.js”></script>
2. Define your menu data in an array of objects containing item type, label, and callback.
const menuItems = [ { type: "item", label: "CSSScript", callback: () => { alert("CSSScript"); } }, { type: "item", label: "jQueryScript", callback: () => { alert("jQueryScript"); } }, { type: "item", label: "VueScript", callback: () => { alert("VueScript"); } }, { type: "separator" }, { type: "item", label: "ReactScript" }, ];
3. Initialize the library and attach the context menu to a container you specify.
const context = new Context("#container", menuItem);
4. Add more items to the context menu.
// with callback context.add_item("Google", () => { alert("Google") }); // with no callback context.add_item("No Callback"); // add separator context.add_separator(); // add more items context.add_contents(menuItem2);
5. Open/close the context menu manually.
context.open(); context.close();
Changelog:
07/03/2021
- Update