nativescript-animated-menu

nativescript-animated-menu

NativeScript module that adds an animated menu to iOS applications. Android support can be implemented on top of this with a little Android animation knowledge, but the structure is there.

Installation

Run npm install nativescript-animated-menu --save from your project's app directory:

.
├── app  <------------------------------ run npm install from here
│   ├── app.css
│   ├── app.js
│   ├── bootstrap.js
│   ├── main-page.js
│   ├── main-page.xml
│   ├── node_modules
│   │   └── nativescript-animated-menu <-- The install will place the module's code here
│   │       └── ...
│   └── package.json <----------------- The install will register “nativescript-animated-menu” as a dependency here
│   └── tns_modules
│       └── ...
└── platforms
    └── ios

If npm doesn't end up working for you, you can just copy and paste this repo's animatedmenu.js file into your app and reference it directly.

Usage

To use the Animated Menu Module set up a menu-page and a main-page. These pages with host the views and logic for the menu and whatever other page you'll have the menu accessible from. A root page will host the animated menu that references the menu-page and the main-page.

root-page      <-------------this is the page that will host the animated menu element
	└── animated-menu     <------------the animated menu element will reference the menu page and main page (see below)
		└── menu-page
		└── main-page

Animated Menu Element

The animated menu itself references the menu-page and the main-page with "main" and "menu" attributes.

<nu:AniMenu main="main-page" menu="menu-page"></nu:AniMenu>

A menu trigger button is places somewhere on the main-page with a load handler that hooks up the animated menu with the button click. You must require() the animated menu module in your main-page logic from your project's node_modules directory:

var aniMenu = require( "./node_modules/nativescript-animated-menu/animatedmenu" );

You will then hook up the trigger button's tap event in the loaded handler like this:

function menuBtnLoaded(args) {
    var btn = args.object;
    btn.on('tap', aniMenu.menuTriggerAction);
}
exports.menuBtnLoaded = menuBtnLoaded;