AngularJS Material design menu toggle

AngularJS-Material-design-menu-toggle.markdown

AngularJS Material design menu toggle

For push menus.

.arrow-right can be swapped for .arrow-left depending on what side the menu comes in from.

Forked from Louise Foster's Pen AngularJS Material design menu toggle.

A Pen by Archer on CodePen.

License.

index.html

<section ng-app="myApp">
  <div ng-click="arrow = !arrow" ng-class="{'hamburger': !arrow, 'arrow-right': arrow}" class="nav-toggle">
    <p ng-show="!arrow">Menu</p>
    <p ng-show="arrow">Close</p>
    <span></span>
  </div>
</section>

script.js

angular.module('myApp',['ngAnimate']);

style.scss

* {
  box-sizing: border-box;
}

.nav-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  height: 18px;
  line-height: 1;
  margin: 50px auto;
  outline: 0;
  padding-right: 35px;
  position: relative;
  width: 80px;
}


p {
  font-family: 'Open Sans';
  font-size: 16px;
  opacity: 1;
  position: absolute;
  transition: all .5s ease;
  transform: translateY(0);
  &.ng-hide-add {
    transform: translateY(0);
    opacity: 1;
  }
  &.ng-hide-add-active {
    transform: translateY(-15px) rotateX(-90deg);
    opacity: 0;
  }
  &.ng-hide-remove {
    transform: translateY(15px) rotateX(90deg);
    opacity: 0;
  }
  &.ng-hide-remove-active {
    transform: translateY(0);
    opacity: 1;
  }
}

span,
span:before,
span:after {
  background-color: #333;
  height: 4px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(7px);
  transition: all 0.5s ease;
  width: 25px;
}

span:before,
span:after {
  content: '';
  transform: translateY(0);
}

.hamburger {
  span {
    &:before {
      transform: translateY(-7px);
    }
    &:after {
      transform: translateY(7px);
    }
  }
}

.arrow-right {
  span {
    transform: rotate(-180deg) translateY(-7px) translateX(0);
    &:before,
    &:after {
      width: 15px;
    }
    &:before {
      transform: rotate(45deg) translateY(14px) translateX(-8px);
    }
    &:after {
      transform: rotate(-45deg) translateY(-14px) translateX(-8px);
    }
  }
}

.arrow-left {
  span {
    transform: rotate(180deg) translateY(-7px) translateX(0);
    &:before,
    &:after {
      width: 15px;
    }
    &:before {
      transform: rotate(-45deg) translateY(6px) translateX(0);
    }
    &:after {
      transform: rotate(45deg) translateY(-6px) translateX(0);
    }
  }
}