Touch-enabled Context Menu In Vanilla JavaScript – basicContext

Category: Javascript , Menu & Navigation | July 19, 2015
Author: electerious
Views Total: 2,110
Official Page: Go to website
Last Update: July 19, 2015
License: MIT

Preview:

Touch-enabled Context Menu In Vanilla JavaScript – basicContext

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)

Leave a Reply