Touch-enabled Context Menu In Vanilla JavaScript – basicContext

Preview:

Description:

basicContext is a lightweight vanilla JavaScript library to create context menus that support click, right click and touch tap events.

More features:

• Smart position. The context menu Stays within the viewport and never opens outside the visible screen-area.
• Scrollable, when the height of the context-menu is bigger than the height of the browser.

Basic usage:

Load the stylesheet basicContext.min.css and JavaScript basicContext.min.js in your project.

<link rel="stylesheet" href="dist/basicContext.min.css">
<script src="dist/basicContext.min.js"></script>

Create items for the context menu using items array. This sample uses ionicons for menu icons.

var items = [
    { type: 'item', title: 'Add Sites', icon: 'ion-plus-round', fn: function() {}},
    { type: 'item', title: 'Reset Login', icon: 'ion-person', fn: function() {}},
    { type: 'item', title: 'Help', icon: 'ion-help-buoy', fn: function() {}},
    { type: 'separator' },
    { type: 'item', title: 'Logout', icon: 'ion-log-out', fn: function() {}}
  ]

Show the context menu on your web page.

basicContext.show(items, e)