This directive is designed to provide a general purpose overlay menu.Floating menu can be used for both flat and nested navigation structures.Desgined to be as simple as possible in order to afford intuitive interactions.Converted into an angular directive for your convenience ????

Menu_Navigation Modal_Popup Plugins

Documentation

Overlay menu UI element

This directive is designed to provide a general purpose overlay menu.

Floating menu can be used for both flat and nested navigation structures.

Desgined to be as simple as possible in order to afford intuitive interactions.

Converted into an angular directive for your convenience :)

Demo

Click here for a live demo.

Installation

  1. Install 'angular-overlay-menu' with bower
bower install angular-overlay-menu 
  1. Add 'g1b.overlay-menu' module to your app config
angular.module('myApp', [   'g1b.overlay-menu',   ...... ])
  1. Use directive in your view
<overlay-menu items="menu" on-select="print(item)"></overlay-menu>
  1. Interact with the menu

You can bring up the menu using <Esc> button or by press and hold anywhere on the page.

Attributes

Property Usage Default Required
items Array of arrays with menu items (for nested navigation) none no
on-select Handler function that is fired when user clicks on one of the items none no

Dependencies


You May Also Like