Skip to content

Instantly share code, notes, and snippets.

@nch3ng

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

Created August 3, 2015 22:07
Show Gist options
  • Save nch3ng/1fb7957e2bdf1288c56b to your computer and use it in GitHub Desktop.
Save nch3ng/1fb7957e2bdf1288c56b to your computer and use it in GitHub Desktop.
Download ZIP
Angular Material Design Header, Ripple Button, and Toggle Sidebar
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.

Raw
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>
Raw
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
}
}]);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment