angular-vertical-menu
Simple vertical menu.
Demo
As demo is worth a thousand words, check it out demo
Installation
Bower :
$ bower angular-vertical-menu --save
Usage
<vertical-menu config="my-config"></vertical-menu>
Json Config Object Schema
{ "$schema": "http://json-schema.org/draft-04/schema#", "id": "http://jsonschema.net", "type": "object", "definitions": { "label": { "description": "Label of the menu item", "type": "string", "optional": false }, "icon": { "description": "Name of a Font Awesome icon", "type": "string", "optional": false }, "href": { "description": "Angular route path or url", "type": "string", "optional": false }, "callback": { "description": "Callback function called when the item is activated. The callback function receive the underlying item object as the first argument.", "type": "string" } }, "properties": { "default": { "type": "object", "properties": { "icon": { "$ref": "#/definitions/icon" } } }, "animation": { "description": "Customization of the animation. If not defined default parameters duration(0.4) and timing(ease) are used.", "type": "object", "properties": { "duration": { "description": "Duration of the animation", "type": "number", "optional": false }, "timing": { "description": "The timing function to use for the animation", "type": "string", "optional": false } } }, "data": { "description": "Declare the structure of menu", "type": "array", "items": { "description": "First level menu item", "type": "object", "properties": { "label": { "$ref": "#/definitions/label" }, "icon": { "$ref": "#/definitions/icon" }, "badge": { "description": "A value to be displayed as a badge", "type": "string" }, "oneOf": [ "href": { "$ref": "#/definitions/href" }, "callback": { "$ref": "#/definitions/callback" }, { "required": [ "href" ] }, { "required": [ "callback" ] } ], "children": { "description": "List of sub items", "type": "array", "items": { "description": "Second level item", "type": "object", "properties": { "label": { "$ref": "#/definitions/label" }, "icon": { "$ref": "#/definitions/icon" }, "oneOf": [ "href": { "$ref": "#/definitions/href" }, "callback": { "$ref": "#/definitions/callback" }, { "required": [ "href" ] }, { "required": [ "callback" ] } ] }, "required": [ "label" ], "additionalProperties": false } } }, "required": [ "label" ], "additionalProperties": false } } } }
Dependencies
- AngularJS - HTML enhanced for web apps!
- Bootstrap - sleek, intuitive, and powerful front-end framework
- Font Awesome - the iconic font and CSS toolkit
Development
Clone the project
git clone https://github.com/gnavarro77/angular-vertical-menu.git
Build
gulp build-js gulp build-css
Run tests
gulp test
Run demo
gulp serve-demo
Build demo
gulp build-demo
License
MIT