ContextMenu

Context Menu plugin for Foundation 6.

Usage

The plugin comes in two ways, one that depends on Foundation 6 and one that works as a standalone version by having the neccessary Foundation ressources packed.

To embed the Foundation dependend version of Context Menu into your page, you just need to include the CSS and the JS files right after the Foundation includes.

  <script src="foundation.contextMenu.js"></script>
  <link rel="stylesheet" type="text/css" href="foundation.contextMenu.css" />

When using the standalone version, just use the following snippet.

  <script src="solo.contextMenu.js"></script>
  <link rel="stylesheet" type="text/css" href="solo.contextMenu.css" />

To configure your menus, either render them in HTML following the Foundation menu structure, or use JavaScript to register different types of context menus.

  Foundation.ContextMenu.prototype.addConfig('listitem', {
    accessible: true,
    single: true,
    structure: [{
      text: 'Move to',
      help: 'Alt + M',
      key: 'ALT_M',  
      click: function($item) {
        alert('Moving item: ' + $item.attr('data-id'));
      }
    }, {
      icon: 'fa fa-paper-plane',
      text: 'Send via mail',  
      click: function($item) {
        alert('Sending a mail!');
      }
    }, {
      cssClass: 'divider'
    }, {
      text: 'More...',
      children: [{
        text: 'Delete'
      }, {
        text: 'Download...',
        children: [{
          text: 'Save as PDF'
        }, {
          text: 'Save as PNG'
        }]
      }]
    }]
  });

To add a context menu to one of your elements, e.g. elements within lists, simply add the data-context-menu attribute, having either a defined menu type or the reference to your rendered HTML list as a value.

  <!-- This li uses the JSON from the config for "listitem" and renders it as the context menu -->
  <li data-context-menu="listitem">
    First item here
  </li>
  <!-- This li uses the JSON from the config for "listitem" and renders it as the context menu -->
  <li data-context-menu="#menu">
    Second item here
  </li>

Make sure to initialize Foundation, whether you use the standalone version or not by calling

$(document).foundation();

and check out the Foundation installation page for more information on how to get started.

Accessibility

This plugin is partly accessible. To allow keyboard users to open the context menus, simply add the following buttons into your trigger elements. Elements having the data-context-menu-trigger attribute will trigger the context menu of their parent element when clicked.

  <li data-context-menu="#menu">
    Second item here
    <button data-context-menu-trigger class="button tiny show-on-focus pull-right">Open menu</button>
  </li>

Touch support

This plugin is also optimized for mobile and touch devices. You can toggle the context menu with a long-touch event, which duration can be adjusted in the plugin's options.

Installation

To install this plugin you can either directly download the files

or install it via NPM:

npm install foundation-contextmenu

In that case you can embed the files using:

  <script src="node_modules/foundation-contextmenu/dist/foundation.contextMenu.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="node_modules/foundation-contextmenu/dist/foundation.contextMenu.css" />

Demo

Test the Context Menu on your own at the demo page!

https://Owlbertz.github.io/ContextMenu/

Acknowledgments

As this project is a plugin for Foundation by ZURB, a big thanks for their stunning framework.

License

Context Menu is available under the MIT License.