-
-
Save johnsonc/b3f0410d669c7945db44c7dd3d2dda1d to your computer and use it in GitHub Desktop.
Ionic Modal SideMenu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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