LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
    
    Side Menus

    
    
    
    
    
    
    
  
 
  
    
    
CSS
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}

.menu.menu-left{
  width:100%;
  
}
.menu.menu-content{
    transform: rotateY(30deg); 
    -moz- transform: rotateY(30deg); 
    -webkit- transform: rotateY(30deg); 
 
}
JS
angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html",
       controller: "MenuCtrl"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })
  
  $urlRouterProvider.otherwise("/event/home");
})

.controller('MainCtrl', function($scope) {
  console.log('MainCtrl');
  
  $scope.attendees = [
    { firstname: 'Nicolas', lastname: 'Cage' },
    { firstname: 'Jean-Claude', lastname: 'Van Damme' },
    { firstname: 'Keanu', lastname: 'Reeves' },
    { firstname: 'Steven', lastname: 'Seagal' },
    { firstname: 'Jeff', lastname: 'Goldblum' },
    { firstname: 'Brendan', lastname: 'Fraser' }
  ];
})

.controller('CheckinCtrl', function($scope) {
  $scope.showForm = true;
  
  $scope.shirtSizes = [
    { text: 'Large', value: 'L' },
    { text: 'Medium', value: 'M' },
    { text: 'Small', value: 'S' }
  ];
  
  $scope.attendee = {};
  $scope.submit = function() {
    if(!$scope.attendee.firstname) {
      alert('Info required');
      return;
    }
    $scope.showForm = false;
    $scope.attendees.push($scope.attendee);
  };
  
})

.controller('MenuCtrl', function($scope) {
 $scope.toggleMenu = function () {
            $scope.sideMenuController.toggleLeft();
    };
})


.controller('AttendeesCtrl', function($scope) {
  
  $scope.activity = [];
  $scope.arrivedChange = function(attendee) {
    var msg = attendee.firstname + ' ' + attendee.lastname;
    msg += (!attendee.arrived ? ' has arrived, ' : ' just left, '); 
    msg += new Date().getMilliseconds();
    $scope.activity.push(msg);
    if($scope.activity.length > 3) {
      $scope.activity.splice(0, 1);
    }
  };
  
})

.directive('fade', function ($timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {

            $timeout(function () {
               
                $scope.$watch('sideMenuController.getOpenRatio()', function (ratio) {
                    
                    $element[0].style.opacity = 1 - Math.abs(ratio);
                });
            });
        }
    };
});
Host Instantly Drag and Drop Website Builder

 

Description

Fading out the main content as user swipes to reveal menu
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID