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