angular-hamburger-helper

what is angular-hamburger-helper?

angular-hamburger-helper is a directive written in angular that provides a "hamburger" icon commonly used to denote a menu icon. In some application states if the menu is not available you will want this to be replaced with a back arrow.

you can see a live demo here.

it should look like

um why?

this transition was inspired by the delightful details section of google's material-design specification.

oh ok

how do i use it?

1. install the module using bower at the command line:

    bower install infomofo/angular-hamburger-helper 

2. include the css file in your html file:

    <link rel="stylesheet" href="bower_components/angular-hamburger-helper/ng-hamburger-helper.css"/> 

3. include the javascript file in your html file:

    <script type='text/javascript' src='bower_components/angular-hamburger-helper/ng-hamburger-helper.js'></script> 

4. include the hamburger helper service in your angular module config:

    var app = angular.module('YourApp',['hamburgerHelper']); 

5. use the directive in your html file. the directive appears as a 44x44 hamburger icon, when "variable" evaluates to true it will rotate and transform into a backwards arrow.

    <ng-hamburger-helper></ng-hamburger-helper> 

6. use the hamburgerHelper service to toggle the state of the button:

but i want it to be pink or bigger or something

you can style the icon with some css:

.hamburger-helper {        /* modifying the height or width will also require modifying the font-size to ensure that the arrow head still lines up */   height: 44px;   font-size: 22px;     width: 44px;   /* this affects the speed of the rotation */     transition: transform 0.3s;  }  .hamburger-helper span {   /* the height of the hamburger bars and width of the arrow */     height: 0.3em;  }  .hamburger-helper span, .hamburger-helper span:after, .hamburger-helper span:before {   /* the color of the hamburger and arrow */     background-color: #fff; }  .hamburger-helper span:after, .hamber-helper span:before {   /* this affects the speed that the hamburger buns are transformed into the arrow */   transition: transform 0.3s; }