nch3ng/Angular Material Design Header, Ripple Button, and Toggle Sidebar.markdown

## Angular Material Design Header, Ripple Button, and Toggle Sidebar.markdown

      
    Raw
  

              Angular Material Design Header, Ripple Button, and Toggle Sidebar.markdown
            
          
    Angular Material Design Header, Ripple Button, and Toggle Sidebar

Angular Material Design Header, Ripple Button, and Toggled Sidebar
A Pen by Nate Cheng on CodePen.
License.

  
## index.html
<html ng-app="demoapp">

<head>
</head>

<body ng-controller="mainCtrl">
  <div class="container" ng-class="{ 'menu-open': isFixed }">
    <header>
    <h1>Angular Material Design Toggle Sidebar</h1>
    <a href="#" ng-class="btnclass" ripple ng-click="toggle($event)" >
      <span class="icon">
        <span class="l1"></span>
        <span class="l2"></span>
        <span class="l3"></span>
      </span>
    </a>
    </header>
    <div class='side-nav' ng-class="{fixed: isFixed}">
    </div>

    <div class="pusher"></div>
  </div>
</body>

</html>

## script.js
var demoApp = angular.module("demoapp", []);

demoApp.directive("ripple", function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var x, y, size = 0,
        offsets,
        func = function(e) {

          var ripple = this.querySelector('b.drop');

          if (ripple == null) {
            // Create ripple
            ripple = document.createElement('b');
            ripple.className += 'drop';

            // Prepend ripple to element
            this.insertBefore(ripple, this.firstChild);

            size = Math.max(element[0].offsetWidth, element[0].offsetHeight);
          }

          var eventType = e.type;

          // Remove animation effect
          ripple.className = ripple.className.replace(/ ?(animate)/g, '');

          // get click coordinates by event type

          x = e.pageX;
          y = e.pageY;

          // set new ripple position by click or touch position
          function getPos(element) {
            var de = document.documentElement;
            var box = element.getBoundingClientRect();
            var top = box.top + window.pageYOffset - de.clientTop;
            var left = box.left + window.pageXOffset - de.clientLeft;
            return {
              top: top,
              left: left
            };
          }
          offsets = getPos(element[0]);

          ripple.style.left = (x - offsets.left - size / 2) + 'px';
          ripple.style.top = (y - offsets.top - size / 2) + 'px';

          // Add animation effect
          ripple.className += ' animate';
        }
      element.on("mouseup", func);
    }
  }
})

demoApp.controller("mainCtrl", ["$scope", "$timeout", function($scope, $timeout){
  $scope.isFixed=true;
  $scope.inputText="";

  console.log($scope.isFixed);
  if(!$scope.isFixed)
    $scope.btnclass="btn menu";
  else
    $scope.btnclass="btn rightArrow open";

  $scope.toggle = function(event) {

    $scope.isFixed = $scope.isFixed == true? false : true;
    var c="btn menu"
    //var c = "btn " + shape[index];
    console.log(c);

    if($scope.isFixed)
      c="btn rightArrow open";
    else
      c="btn menu";

      $scope.btnclass=c
  }
}]);

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

## style.css
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-color: #eeeeee;
  color: #949494;
}

* {
  box-sizing: border-box;
}

header {
  z-index:2;
  background-color: #3f51b5;
  padding: 1em 3em 1em 3em;
  color: #FFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  position: relative;
}

header > .btn {
  position: absolute;
  bottom: -2em;
  right: 2em;
  font-size: 1.2em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: all 1s;
}

header > .btn.open {
  -webkit-transform: translate3d(-450%, 0, 0);
  transform: translate3d(-450%, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: all 1s;
}

.btn {
  display: inline-block;
  width: 4em;
  height: 4em;
  background-color: #FFF;
  color: #9e9e9e;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2em;
  overflow: hidden;
  transform: translateZ(0);
  transition: all 0.5s ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

header .btn > span > span {
  background-color: #e91e63;
}

.btn > span {
  display: block;
  position: absolute;
  width: 2em;
  height: 2em;
  transition: transform 0.5s ease;
  overflow: hidden;
  margin: 1em;
}

.btn > span > span {
  display: block;
  background-color: #9e9e9e;
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  transition: all 0.5s ease;
  border: 1px solid transparent;
}

.btn.menu > span > span {
  transform: scale(1, 0.2) translate(0, -3em);
}

.btn.menu > span > span.l2 {
  transform: scale(1, 0.2) translate(0, 0);
}

.btn.menu > span > span.l3 {
  transform: scale(1, 0.2) translate(0, 3em);
}

.btn.rightArrow > span > span {
  width: 1.8em;
  height: 0.4em;
  transform: translate(0, 0.8em);
}

.btn.rightArrow > span > span.l2 {
  transform-origin: 100% 0;
  width: 1.4em;
  transform: translate(0.6em, 1em) rotate(45deg);
}

.btn.rightArrow > span > span.l3 {
  transform-origin: 100% 100%;
  width: 1.4em;
  transform: translate(0.6em, 0.64em) rotate(-45deg);
}

.drop {
  display: block;
  position: absolute;
  background: #CCC;
  border-radius: 100%;
  transform: scale(0);
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.drop:before {
  display: block;
  position: absolute;
  content: "";
  background-color: #EEE;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
}

.drop.animate {
  animation: drop 1s ease-out;
}

.drop.animate:before {
  animation: drop2 1s ease-out;
}

@keyframes drop {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

@keyframes drop2 {
  30% {
    opacity: 1;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

.side-nav {
  z-index:2;
  right: 0;
  position: absolute;
  width: 300px;
  background-color: #ffffff;
  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  height: 100%;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: all 1s;
}

.fixed {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 1s;
}

.pusher {
  height:100%;
  width:100%;
  position: relative;
  left: 0;
  z-index: 1;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.menu-open .pusher::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
	<html ng-app="demoapp">

	<head>
	</head>

	<body ng-controller="mainCtrl">
	<div class="container" ng-class="{ 'menu-open': isFixed }">
	<header>
	<h1>Angular Material Design Toggle Sidebar</h1>
	<a href="#" ng-class="btnclass" ripple ng-click="toggle($event)" >
	<span class="icon">
	<span class="l1"></span>
	<span class="l2"></span>
	<span class="l3"></span>
	</span>
	</a>
	</header>
	<div class='side-nav' ng-class="{fixed: isFixed}">
	</div>

	<div class="pusher"></div>
	</div>
	</body>

	</html>
	var demoApp = angular.module("demoapp", []);

	demoApp.directive("ripple", function() {
	return {
	restrict: 'A',
	link: function(scope, element, attrs) {
	var x, y, size = 0,
	offsets,
	func = function(e) {

	var ripple = this.querySelector('b.drop');

	if (ripple == null) {
	// Create ripple
	ripple = document.createElement('b');
	ripple.className += 'drop';

	// Prepend ripple to element
	this.insertBefore(ripple, this.firstChild);

	size = Math.max(element[0].offsetWidth, element[0].offsetHeight);
	}

	var eventType = e.type;

	// Remove animation effect
	ripple.className = ripple.className.replace(/ ?(animate)/g, '');

	// get click coordinates by event type

	x = e.pageX;
	y = e.pageY;

	// set new ripple position by click or touch position
	function getPos(element) {
	var de = document.documentElement;
	var box = element.getBoundingClientRect();
	var top = box.top + window.pageYOffset - de.clientTop;
	var left = box.left + window.pageXOffset - de.clientLeft;
	return {
	top: top,
	left: left
	};
	}
	offsets = getPos(element[0]);

	ripple.style.left = (x - offsets.left - size / 2) + 'px';
	ripple.style.top = (y - offsets.top - size / 2) + 'px';

	// Add animation effect
	ripple.className += ' animate';
	}
	element.on("mouseup", func);
	}
	}
	})

	demoApp.controller("mainCtrl", ["$scope", "$timeout", function($scope, $timeout){
	$scope.isFixed=true;
	$scope.inputText="";

	console.log($scope.isFixed);
	if(!$scope.isFixed)
	$scope.btnclass="btn menu";
	else
	$scope.btnclass="btn rightArrow open";

	$scope.toggle = function(event) {

	$scope.isFixed = $scope.isFixed == true? false : true;
	var c="btn menu"
	//var c = "btn " + shape[index];
	console.log(c);

	if($scope.isFixed)
	c="btn rightArrow open";
	else
	c="btn menu";

	$scope.btnclass=c
	}
	}]);
	html,
	body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	background-color: #eeeeee;
	color: #949494;
	}

	* {
	box-sizing: border-box;
	}

	header {
	z-index:2;
	background-color: #3f51b5;
	padding: 1em 3em 1em 3em;
	color: #FFF;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	position: relative;
	}

	header > .btn {
	position: absolute;
	bottom: -2em;
	right: 2em;
	font-size: 1.2em;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: all 1s;
	}

	header > .btn.open {
	-webkit-transform: translate3d(-450%, 0, 0);
	transform: translate3d(-450%, 0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: all 1s;
	}

	.btn {
	display: inline-block;
	width: 4em;
	height: 4em;
	background-color: #FFF;
	color: #9e9e9e;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 2em;
	overflow: hidden;
	transform: translateZ(0);
	transition: all 0.5s ease;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	header .btn > span > span {
	background-color: #e91e63;
	}

	.btn > span {
	display: block;
	position: absolute;
	width: 2em;
	height: 2em;
	transition: transform 0.5s ease;
	overflow: hidden;
	margin: 1em;
	}

	.btn > span > span {
	display: block;
	background-color: #9e9e9e;
	position: absolute;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	transition: all 0.5s ease;
	border: 1px solid transparent;
	}

	.btn.menu > span > span {
	transform: scale(1, 0.2) translate(0, -3em);
	}

	.btn.menu > span > span.l2 {
	transform: scale(1, 0.2) translate(0, 0);
	}

	.btn.menu > span > span.l3 {
	transform: scale(1, 0.2) translate(0, 3em);
	}

	.btn.rightArrow > span > span {
	width: 1.8em;
	height: 0.4em;
	transform: translate(0, 0.8em);
	}

	.btn.rightArrow > span > span.l2 {
	transform-origin: 100% 0;
	width: 1.4em;
	transform: translate(0.6em, 1em) rotate(45deg);
	}

	.btn.rightArrow > span > span.l3 {
	transform-origin: 100% 100%;
	width: 1.4em;
	transform: translate(0.6em, 0.64em) rotate(-45deg);
	}

	.drop {
	display: block;
	position: absolute;
	background: #CCC;
	border-radius: 100%;
	transform: scale(0);
	pointer-events: none;
	width: 100%;
	height: 100%;
	}

	.drop:before {
	display: block;
	position: absolute;
	content: "";
	background-color: #EEE;
	border-radius: 100%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: scale(0);
	}

	.drop.animate {
	animation: drop 1s ease-out;
	}

	.drop.animate:before {
	animation: drop2 1s ease-out;
	}

	@keyframes drop {
	100% {
	opacity: 0;
	transform: scale(2.5);
	}
	}

	@keyframes drop2 {
	30% {
	opacity: 1;
	transform: scale(0);
	}
	100% {
	opacity: 0;
	transform: scale(2.5);
	}
	}

	.side-nav {
	z-index:2;
	right: 0;
	position: absolute;
	width: 300px;
	background-color: #ffffff;
	box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	height: 100%;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: all 1s;
	}

	.fixed {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 1s;
	}

	.pusher {
	height:100%;
	width:100%;
	position: relative;
	left: 0;
	z-index: 1;
	height: 100%;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	}

	.pusher::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: rgba(0,0,0,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
	}

	.menu-open .pusher::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	}