Skip to content

Instantly share code, notes, and snippets.

@Zren

Zren/gist:15d800159bee78b3e4e6

Last active May 24, 2017 05:13
Show Gist options
  • Save Zren/15d800159bee78b3e4e6 to your computer and use it in GitHub Desktop.
Save Zren/15d800159bee78b3e4e6 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Modal SideMenu
Raw
gistfile2.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal SideMenu</title>
<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div on-swipe="onSideMenuSwipe($event)">
<ion-nav-view></ion-nav-view>
</div>
<script id="sidemenu.html" type="text/ng-template">
<div class="menu menu-left" on-swipe="onSideMenuSwipe($event)">
<ion-content>
<ul class="list">
<!-- Note each link has the 'ng-click="sideMenu.hide()"' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/" class="item" ng-click="sideMenu.hide()">Home</a>
<a href="#/check-in" class="item" ng-click="sideMenu.hide()">Check-in</a>
<a href="#/attendees" class="item" ng-click="sideMenu.hide()">Attendees</a>
</ul>
</ion-content>
</div>
</script>
<script id="templates/main.html" type="text/ng-template">
<ion-nav-bar class="bar-positive" animation="no-animation">
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon sidemenu-button" ng-click="sideMenu.toggle()">
</button>
<button class="button button-clear" ng-click="sideMenu.toggle()">Test</button>
</ion-nav-buttons>
<ion-nav-view animation="no-animation" name="menuContent"></ion-nav-view>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view title="Welcome">
<ion-content padding="true">
<p>Swipe to the right to reveal the left menu. (On desktop click and drag from left to right)</p>
<p><span class="badge">Note</span> Swipe must origionate from the left 1/3 of the screen.</p>
<p><span class="badge">Gist</span><a href="https://gist.github.com/Zren/15d800159bee78b3e4e6">https://gist.github.com/Zren/15d800159bee78b3e4e6</a></p>
<ul class="list">
<li class="item item-divider">Bugs</li>
<li class="item item-text-wrap">Opening and closing the menu really fast with the menu button will break it leaving it showned in the open state while the menu is visibly closed.</li>
<li class="item item-text-wrap">The Ionic nightly builds broke the animations. I'll have to look into what changed sometime. For now, this is frozen to Ionic 1.0.0-beta.13</li>
</ul>
</ion-content>
</ion-view>
</script>
<script id="templates/check-in.html" type="text/ng-template">
<ion-view title="Event Check-in">
<ion-content padding="true">
</ion-content>
</ion-view>
</script>
<script id="templates/attendees.html" type="text/ng-template">
<ion-view title="Event Attendees" left-buttons="leftButtons">
<ion-content padding="true">
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
gistfile3.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.sidemenu-button {
width: 14px; /* = -5px (margin-left) + 24px (icon-menu) - 17px (offset while open) + 12px (margin-right) */
height: 32px;
}
.sidemenu-button:before {
position: absolute;
top: 0;
left: -17px;
transition: left 400ms;
}
.menu-open .sidemenu-button:before {
left: -22px;
}
/* Allow pointer events on the header bar when the sidemenu is open */
.modal-open.menu-open ion-nav-view ion-nav-bar {
pointer-events: auto;
}
/* Move the backdrop & sidemenu below the header bar */
.modal-backdrop.sidemenu-modal {
top: 44px;
}
Raw
gistfile4.js
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicModal, $ionicGesture) {
$scope.onSideMenuSwipe = function($event) {
if ($event.gesture.direction == 'right') {
var startedFrom = $event.gesture.startEvent.center;
if (startedFrom.pageX <= window.innerWidth / 3) {
$scope.sideMenu.show();
}
} else if ($event.gesture.direction == 'left') {
if ($scope.sideMenu.isShown()) {
$scope.sideMenu.hide();
}
}
}
$ionicModal.fromTemplateUrl('sidemenu.html', function(modal) {
// Need to manually link ModalView.modalEl since it wasn't able to find a .modal element.
modal.modalEl = modal.el.querySelector('.menu');
modal.$el.addClass('sidemenu-modal');
// Handle swiping the backdrop to close.
var gesture = $ionicGesture.on('swipe', $scope.onSideMenuSwipe, modal.$el);
$scope.$on('$destroy', function() {
$ionicGesture.off(gesture, 'swipe', $scope.onSideMenuSwipe);
});
// Modify some of the modal's methods.
modal._hide = modal.hide;
modal._show = modal.show;
modal.show = function() {
document.body.classList.add('menu-open');
this._show();
};
modal.hide = function() {
this._hide();
document.body.classList.remove('menu-open');
};
modal.toggle = function() {
if (this.isShown()) {
this.hide();
} else {
this.show();
}
};
$scope.sideMenu = modal;
}, {
animation: 'slide-in-left',
scope: $scope
});
})
.controller('CheckinCtrl', function($scope) {})
.controller('AttendeesCtrl', function($scope) {})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "",
abstract: true,
templateUrl: "templates/main.html"
})
.state('main.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html"
}
}
})
.state('main.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "templates/check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('main.attendees', {
url: "/attendees",
views: {
'menuContent' :{
templateUrl: "templates/attendees.html",
controller: "AttendeesCtrl"
}
}
})
$urlRouterProvider.otherwise("/home");
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment