Overlay slide menu
How do I make an overlay slide menu?
What is a overlay slide menu? How do you make a overlay slide menu? This script and codes were developed by Heedoo on 20 August 2022, Saturday.
Overlay slide menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>overlay slide 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 Menu Exposed On Large Viewport</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="MainCtrl"> <ion-side-menus> <fader></fader> <ion-side-menu-content style="width:70%;"> <ion-header-bar class="bar-balanced"> <h1 class="title title-left"><i class="ion-cloud"></i> Go Cloud</h1> </ion-header-bar> <ion-wallet-select ng-class="isWalletShown?'shown':'hidden'"> <ion-item class="item-icon-right item-stable" ng-click="toggleWallet()"> <i class="icon" ng-class="isWalletShown?'ion-arrow-up-b':'ion-arrow-down-b'"></i> Default </ion-item> <wallet-content> <ion-scroll style="height:100%;"> <ion-item class="item-icon-left"> <i class="icon ion-filing"></i> Total </ion-item> <ion-item class="item-icon-left"> <i class="icon ion-filing"></i> Credit Card </ion-item> <ion-item class="item-icon-left"> <i class="icon ion-filing"></i> Default </ion-item> </ion-scroll> <ion-footer-bar class="add-wallet"> <h1 class="title">+ Add wallet</h1> </ion-footer-bar> </wallet-content> </ion-wallet-select> <ion-content class="has-footer has-wallet"> <ion-list> <ion-item>Transactions</ion-item> <ion-item>Debts</ion-item> <ion-item>Trends</ion-item> <ion-item>Categories</ion-item> <div class="item item-divider">PLANNING</div> <ion-item>Budget</ion-item> <ion-item>Savings</ion-item> </ion-list> </ion-content> <ion-footer-bar class="bar-energized premium-bar" ng-class="isWalletShown?'hidden':'shown'"> <h1 class="title">GO PREMIUM</h1> </ion-footer-bar> </ion-side-menu-content> <ion-side-menu side="right" width="{{width()}}" can-drag-menu> <ion-header-bar class="bar-balanced"> <button menu-close class="button button-icon ion-navicon"></button> <h1 class="title">Credit card</h1> </ion-header-bar> <ion-content class="padding"> <p> On a small viewport (less than 768px window width), the left menu will be hidden, but can be shown by swiping left to right, or toggling the button in the top left of the header. On a large viewport (greater than or equal to 768px), the left menu will stay open. </p> <p> Using <code>large</code> as the attribute's value is an alias to <code>(min-width:768px)</code> since it is the most common use-case. However, for added flexibility, any valid media query could be added as the value, such as <code>(min-width:600px)</code> or even multiple queries such as <code>(min-width:750px) and (max-width:1200px)</code>. </p> </ion-content> </ion-side-menu> </ion-side-menus> </body>
</html> <script src="js/index.js"></script>
</body>
</html>
Overlay slide menu - Script Codes CSS Codes
body { cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
fader { position: absolute; display: block; height: 100%; width: 100%; background: rgba(0,0,0,.8); opacity: 0; z-index: -1; }
ion-content.has-wallet { top: 96px !important; }
ion-wallet-select { position: relative; display: block; top: 44px; height: calc(0% - 96px); transition: all .5s; z-index: 10; }
ion-wallet-select.shown { height: calc(100% - 96px); }
ion-wallet-select.hidden { height: calc(0% - 96px); }
ion-wallet-select wallet-content { display: block; overflow: hidden; height: 100%; background: #ccc; }
ion-wallet-select wallet-content .item:first-child { margin-top: 10px; }
ion-wallet-select wallet-content .item:last-child { margin-bottom: 64px; }
.premium-bar { transition: all .5s; }
.premium-bar.shown { opacity: 1; }
.premium-bar.hidden { opacity: 0; }
.add-wallet { background: #ccc !important; bottom: -53px !important; z-index: 1 !important; }
Overlay slide menu - Script Codes JS Codes
angular.module('ionicApp', ['ionic'])
.directive('fader', function ($timeout, $ionicGesture, $ionicSideMenuDelegate) { return { restrict: 'E', require: '^ionSideMenus', scope: true, link: function($scope, $element, $attr, sideMenuCtrl) { $ionicGesture.on('tap', function(e) { $ionicSideMenuDelegate.toggleRight(true); }, $element); $ionicGesture.on('dragleft', function(e) { sideMenuCtrl._handleDrag(e); e.gesture.srcEvent.preventDefault(); }, $element); $ionicGesture.on('dragright', function(e) { sideMenuCtrl._handleDrag(e); e.gesture.srcEvent.preventDefault(); }, $element); $ionicGesture.on('release', function(e) { sideMenuCtrl._endDrag(e); }, $element); $scope.sideMenuDelegate = $ionicSideMenuDelegate; $scope.$watch('sideMenuDelegate.getOpenRatio()', function(ratio) { if (Math.abs(ratio)<1) { $element[0].style.zIndex = "1"; $element[0].style.opacity = 0.7-Math.abs(ratio); } else { $element[0].style.zIndex = "-1"; } }); } }
})
.directive('canDragMenu', function ($timeout, $ionicGesture, $ionicSideMenuDelegate) { return { restrict: 'A', require: '^ionSideMenus', scope: true, link: function($scope, $element, $attr, sideMenuCtrl) { $ionicGesture.on('dragleft', function(e) { sideMenuCtrl._handleDrag(e); e.gesture.srcEvent.preventDefault(); }, $element); $ionicGesture.on('dragright', function(e) { sideMenuCtrl._handleDrag(e); e.gesture.srcEvent.preventDefault(); }, $element); $ionicGesture.on('release', function(e) { sideMenuCtrl._endDrag(e); }, $element); } }
})
.controller('MainCtrl', function($scope, $window, $ionicSideMenuDelegate) { $scope.width = function () { return $window.innerWidth; }; $scope.openMenu = function() { $ionicSideMenuDelegate.toggleRight(true); }; $scope.isWalletShown = false; $scope.toggleWallet = function () { $scope.isWalletShown = $scope.isWalletShown === false ? true : false; console.log('Toggled'); }
});
Developer | Heedoo |
Username | heedoo |
Uploaded | August 20, 2022 |
Rating | 3.5 |
Size | 3,456 Kb |
Views | 42,504 |
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!
Name | Size |
Service | 1,583 Kb |
Android local notification | 3,171 Kb |
Encode video | 2,243 Kb |
Controller | 1,685 Kb |
A Pen by heedoo | 1,458 Kb |
Login-ng-modal | 3,566 Kb |
Node express passing parameter | 1,743 Kb |
ListView auto height | 2,177 Kb |
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!
Name | Username | Size |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Rainbow Preloader with Offset-Path | Rachelmcgrane | 2,721 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Navcube | Wbarlow | 4,775 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!