<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 ---------->
<div ng-app="ionic_starter">
<ion-nav-view></ion-nav-view>
<popup-menu></popup-menu>
</body>
<script id="popup-menu.html" type="text/ng-template">
<div class="popup-menu">
<div class="popup-menu-overlay" ng-class="{'in': menu_is_open}" ng-click="togglePopupMenu()"></div>
<i class="ion ion-grid popup-menu-toggle" ng-click="togglePopupMenu()" ng-class="{'out': menu_is_open}"></i>
<div class="popup-menu-panel" ng-class="{'in': menu_is_open}">
<div class="popup-menu-item" ui-sref="#" ng-click="togglePopupMenu()">
<i class="ion ion-home"></i>
<span>HOME</span>
</div>
<div class="popup-menu-item" ng-click="togglePopupMenu()">
<i class="ion ion-trophy"></i>
<span>CUPS</span>
</div>
<div class="popup-menu-item" ng-click="togglePopupMenu()">
<i class="ion ion-podium"></i>
<span>LEADERBOARD</span>
</div>
<div class="popup-menu-item" ng-click="togglePopupMenu()">
<i class="ion ion-help"></i>
<span>HELP</span>
</div>
<div class="popup-menu-item" ng-click="togglePopupMenu()">
<i class="ion ion-person"></i>
<span>ACCOUNT</span>
</div>
<div class="popup-menu-item" ng-click="togglePopupMenu();">
<i class="ion ion-bag"></i>
<span>SHOP</span>
</div>
</div>
</div>
</script>
<script id="menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-title>PopupMenu</ion-nav-title>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right" name="menu_content"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-nav-view>
<div class="list">
<div class="item">Home</div>
</div>
</ion-nav-view>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view>
<ion-content padding="true"></ion-content>
</ion-view>
</script>
.popup-menu-overlay {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 6;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
background-image: -webkit-linear-gradient(rgba(68, 68, 68, 0.5) 0%, rgba(68, 68, 68, 0.25) 100%);
background-image: linear-gradient(rgba(68, 68, 68, 0.5) 0%, rgba(68, 68, 68, 0.25) 100%);
}
.popup-menu-overlay.in {
opacity: 1;
visibility: visible;
}
.popup-menu-toggle {
position: fixed;
width: 40px;
height: 40px;
bottom: 20px;
left: 50%;
margin-left: -20px;
background-color: #886aea;
border: 1px solid #5227e1;
z-index: 7;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.popup-menu-toggle:before {
position: absolute;
content: '\f13f';
font-family: "Ionicons";
width: 40px;
height: 40px;
top: 0px;
left: 0px;
line-height: 40px;
text-align: center;
font-size: 28px;
color: white;
opacity: 1;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(1);
transform: scale(1);
}
.popup-menu-toggle.out {
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.popup-menu-toggle.out:before {
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
-webkit-transform: scale(0);
transform: scale(0);
}
.popup-menu-panel {
position: fixed;
width: 300px;
height: 200px;
bottom: 20px;
left: 50%;
margin-left: -150px;
padding: 0px 5px;
background-color: #886aea;
z-index: 8;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scale(0);
transform: scale(0);
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.popup-menu-panel .popup-menu-item {
margin: auto;
-webkit-box-flex: 1 0 30%;
-webkit-flex: 1 0 30%;
-moz-box-flex: 1 0 30%;
-moz-flex: 1 0 30%;
-ms-flex: 1 0 30%;
flex: 1 0 30%;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
.popup-menu-panel .popup-menu-item i {
margin: auto 0px 5px 0px;
padding: 0px;
font-size: 30px;
line-height: 30px;
text-align: center;
color: white;
}
.popup-menu-panel .popup-menu-item span {
padding: 0px;
margin: 0px 0px auto 0px;
color: white;
text-align: center;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
line-height: 11px;
}
.popup-menu-panel .popup-menu-item:active i {
color: gold;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}
.popup-menu-panel .popup-menu-item:active span {
color: gold;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}
.popup-menu-panel.in {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.popup-menu-panel.in .popup-menu-item {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
angular.module('ionic_starter', ['ionic']);
angular.module('ionic_starter').run(function($rootScope, $ionicPlatform) {
return $ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
return StatusBar.styleDefault();
}
});
});
angular.module('ionic_starter').config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html'
});
$stateProvider.state('app.home', {
url: '/home',
views: {
'menu_content': {
templateUrl: 'home.html'
}
}
});
return $urlRouterProvider.otherwise('/app/home');
});
angular.module('ionic_starter').directive('popupMenu', function($rootScope) {
return {
restrict: 'E',
templateUrl: 'popup-menu.html',
replace: true,
transclude: true,
scope: {
model: '=ngModel'
},
link: function($scope, $el, $attrs) {
$scope.menu_is_open = false;
return $scope.togglePopupMenu = function() {
return $scope.menu_is_open = !$scope.menu_is_open;
};
}
};
});
