Ionic Fading Menu

Developer
Mike Hartington
Size
3,594 Kb
Views
22,264
  1. Ionic Fading Menu Previews
  2. Ionic Fading Menu HTML Codes
  3. Ionic Fading Menu CSS Codes
  4. Ionic Fading Menu JS Codes

How do I make an ionic fading menu?

Fading out the main content as user swipes to reveal menu. What is a ionic fading menu? How do you make a ionic fading menu? This script and codes were developed by Mike Hartington on 21 September 2022, Wednesday.

Ionic Fading Menu Previews
IQ Test

Ionic Fading Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ionic Fading Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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>Side Menus</title> <link href="https://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet"> <script src="https://code.ionicframework.com/0.9.22/js/ionic.js"></script> <script src="https://code.ionicframework.com/0.9.22/js/angular/angular.js"></script> <script src="https://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script> <script src="https://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script> <script src="https://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script> <script src="https://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script> </head> <body> <div ng-controller="MainCtrl"> <nav-view></nav-view> </div> <script id="event-menu.html" type="text/ng-template"> <side-menus> <pane side-menu-content fade> <nav-bar type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"></nav-bar> <nav-view name="menuContent"></nav-view> </pane> <side-menu side="left"> <header class="bar bar-header bar-assertive"> <div class="title">Left Menu</div> </header> <content has-header="true"> <ul class="list"> <a href="#/event/check-in" ng-click="toggleMenu()" class="item">Check-in</a> <a href="#/event/attendees" ng-click="toggleMenu()" class="item">Attendees</a> </ul> </content> </side-menu> </side-menus> </script> <script id="home.html" type="text/ng-template"> <view title="'Welcome'"> <content has-header="true" padding="true"> <p>Swipe to the right to reveal the left menu.</p> <p>(On desktop click and drag from left to right)</p> </content> </view> </script> <script id="check-in.html" type="text/ng-template"> <view title="'Event Check-in'"> <content has-header="true"> <form class="list" ng-show="showForm"> <div class="item item-divider"> Attendee Info </div> <label class="item item-input"> <input type="text" placeholder="First Name" ng-model="attendee.firstname"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name" ng-model="attendee.lastname"> </label> <div class="item item-divider"> Shirt Size </div> <radio ng-repeat="shirtSize in shirtSizes" ng-value="shirtSize.value" ng-model="attendee.shirtSize"> {{ shirtSize.text }} </radio> <div class="item item-divider"> Lunch </div> <toggle ng-model="attendee.vegetarian"> Vegetarian </toggle> <div class="padding"> <button class="button button-block" ng-click="submit()">Checkin</button> </div> </form> <div ng-hide="showForm"> <pre ng-bind="attendee | json"></pre> <a href="#/event/attendees">View attendees</a> </div> </content> </view> </script> <script id="attendees.html" type="text/ng-template"> <view title="'Event Attendees'"> <content has-header="true"> <div class="list"> <toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'" ng-model="attendee.arrived" ng-change="arrivedChange(attendee)"> {{ attendee.firstname }} {{ attendee.lastname }} </toggle> <div class="item item-divider"> Activity </div> <div class="item" ng-repeat="msg in activity"> {{ msg }} </div> </div> </content> </view> </script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Ionic Fading Menu - Script Codes CSS Codes

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);
}

Ionic Fading Menu - Script Codes JS Codes

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); }); }); } };
});
Ionic Fading Menu - Script Codes
Ionic Fading Menu - Script Codes
Home Page Home
Developer Mike Hartington
Username mhartington
Uploaded September 21, 2022
Rating 3.5
Size 3,594 Kb
Views 22,264
Do you need developer help for Ionic Fading Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike Hartington (mhartington) Script Codes
Name
Blank Starter - Nightly
Quick parallax with stellar.js
On-hold example
Input type date
Ionic list css
Animated background
Centered
Nested Flex
Collection repeat and navigation
Blank Starter
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!