<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic OkCupid Side Menu</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://code.ionicframework.com/collide/0.0.4/collide.js"></script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Ionic OkCupid Side Menu">
<ion-content class="padding background-lightgrey">
<button class="button-circle rotate-15">
<i class="ion-arrow-up-c"></i>
</button>
<h3>Click on the hamburger</h3>
</ion-content>
</ion-view>
</script>
<script id="templates/side-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="content"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" ng-controller="SideMenuCtrl">
<ion-pane class="background-grey">
<div class="row menu-top">
<div class="col col-center">
<img class="profile-image" ng-src="http://www.loringdodge.com/files/images/cooper-small.jpg" animate-ratio="fadeIn"/>
</div>
</div>
<div class="menu-middle">
<div class="row">
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-ios-pulse-strong"></i>
</button>
</div>
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-heart"></i>
</button>
</div>
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-film-marker"></i>
</button>
</div>
</div>
<div class="row">
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-chatbox"></i>
</button>
</div>
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-person-stalker"></i>
</button>
</div>
<div class="col col-center">
<button class="button-circle" animate-ratio="fadeIn">
<i class="ion-android-star-half"></i>
</button>
</div>
</div>
</div>
<div class="menu-bottom" animate-ratio="slideUp">
<button class="button-circle">
<i class="ion-erlenmeyer-flask"></i>
</div>
</div>
</ion-pane>
</ion-side-menu>
</ion-side-menus>
</script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
<script>
angular.module('starter', ['ionic', 'ionic.animate.ratio'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/side-menu.html"
})
.state('app.home', {
url: "/home",
views: {
'content': {
templateUrl: "templates/home.html"
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
angular.module('ionic.animate.ratio', [])
.directive('animateRatio', function($timeout, $ionicSideMenuDelegate) {
return {
restrict: 'A',
scope: {
animateRatio: '=',
},
link: function (scope, element, attr) {
$timeout(function () {
scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
scope.animateRatio(element[0], ratio);
});
});
}
}
})
.controller('SideMenuCtrl', function($scope, $timeout, $stateParams, $ionicSideMenuDelegate) {
/*!
* Expects number from 0.0 -> 1.0
* Returns absolute value
*
* @param {Number}
* @return {Number}
*/
var transitionIn = function(ratio) {
return Math.abs(ratio);
}
/*!
* Expects number from 0.0 to 1.0
* Returns absolute value in reverse 1.0 -> 0.0
*
* @param {Number}
* @return {Number}
*/
// 1.0 to 0.0
var transitionOut = function(ratio) {
return (1- Math.abs(ratio));
}
/*!
* Expects number from 0.0 to 1.0
* Returns absolute value from number to number
* Ex. 10 -> 20 or 20 -> 10
*
* @param {Number}
* @param {Number}
* @param {Number}
* @return {Number}
*/
// from min to max
var transitionFromTo = function(ratio, from, to) {
return from - (Math.abs(ratio) * (from - to));
}
$scope.fadeIn = function(element, ratio) {
element.style.transform = element.style.webkitTransform = 'scale(' + transitionIn(ratio) + ')';
element.style.opacity = transitionIn(ratio);
}
$scope.slideUp = function(element, ratio) {
element.style.transform = element.style.webkitTransform = 'translateY(' + transitionFromTo(ratio, 100, 0) + '%' + ')';
}
});
</script>
/* Background */
.background-grey {
background-color: #455A64 !important;
}
.background-lightgrey {
background-color: #B0BEC5;
}
/* Top */
.menu-top {
height: 40%;
}
/* Middle */
.menu-middle {
height: 40%;
}
/* Bottom */
.menu-bottom {
position:relative;
height: 20%;
background-color: #37474F;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
/* Components */
.col.col-center{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Profile Image */
.profile-image {
width: 140px;
height: 140px;
border-radius: 50%;
border: 10px solid #546E7A;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.profile-image:hover {
border: 3px solid white;
}
/* Buttons */
.button-circle {
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
background-color: #546E7A;
border: 3px solid #546E7A;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.button-circle i {
font-size: 1.5em;
color: white;
}
.button-circle:hover {
border: 3px solid white;
background-color: #455A64;
-webkit-transform: scale(1.2) !important;
transform: scale(1.2) !important;
}
.button-circle.rotate-15 {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.button-circle.rotate-15 + h3 {
display:inline-block;
margin-left: 10px;
color: #37474F;
}
.menu-bottom .button-circle {
position: absolute;
left: 50%;
top: -25px;
background-color: #26C6DA;
border: 3px solid #26C6DA;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
