As an alternative, please consider using https://github.com/dpiccone/ng-pageslide instead
An AngularJS module that provides a slide out menu for your application.
Include the CSS and JS files:
<link rel="stylesheet" href="https://github.com/ShoppinPal/ng-mobile-menu/blob/master/ng-mobile-menu.min.css" />
<link rel="stylesheet" href="https://github.com/ShoppinPal/ng-mobile-menu/blob/master/your-custom-stylesheet.css" />
<!-- ng-mobile-menu.js should be referenced after Angular and before your app -->
<script type="text/javascript" src="https://github.com/ShoppinPal/ng-mobile-menu/raw/master/angular.js"></script>
<script type="text/javascript" src="https://github.com/ShoppinPal/ng-mobile-menu/raw/master/ng-mobile-menu.min.js"></script>
<script type="text/javascript" src="https://github.com/ShoppinPal/ng-mobile-menu/raw/master/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>
Check the /demo
folder in the repository for a working demo.
No longer using href targets to show and hide menu. Now you must use the new $spMenu
provider to show and hide the menu.
Use hardware accelerated CSS transitions.
Remove horizontal scroll bars when menu is showing.
Initial release