Ng-mobile-menu

An AngularJS module that provides a slide out menu for your application.


Project maintained by ShoppinPal Hosted on GitHub Pages — Theme by mattgraham

ng-mobile-menu

An AngularJS module that provides a slide out menu for your application.

Download

Grab the latest release from here.

Usage

Include the CSS and JS files:

<link rel="stylesheet" href="ng-mobile-menu.min.css" />
<link rel="stylesheet" href="your-custom-stylesheet.css" />

<!-- ng-mobile-menu.js should be referenced after Angular and before your app -->
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-mobile-menu.min.js"></script>
<script type="text/javascript" src="your-angular-app.js"></script>

Add shoppinpal.mobile-menu as dependency in your app.

angular.module('your-awesome-app',['shoppinpal.mobile-menu']);

Then you just need to structure your HTML like this:

<div id="sp-nav">
<!-- put your menu in here -->
</div>

<div id="sp-page">
<!-- put your page content in here -->
</div>

Hide and show the menu in an ngClick like this ng-click="$spMenu.toggle()". (.show() and .hide() are also available if you need them)

<button ng-click="$spMenu.toggle()">Menu</button>

Demo

Check out the demo

Changelog

0.2.0

Breaking Changes

No longer using href targets to show and hide menu. Now you must use the new $spMenu provider to show and hide the menu.

0.1.3