"nav-bar"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic OkCupid Side Menu</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script src="https://code.ionicframework.com/collide/0.0.4/collide.js"></script> <script id="templates/home.html" type="text/ng-template"> <ion-view view-title="Ionic OkCupid Side Menu"> <ion-content class="padding background-lightgrey"> <button class="button-circle rotate-15"> <i class="ion-arrow-up-c"></i> </button> <h3>Click on the hamburger</h3> </ion-content> </ion-view> </script> <script id="templates/side-menu.html" type="text/ng-template"> <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="bar-stable"> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view name="content"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left" ng-controller="SideMenuCtrl"> <ion-pane class="background-grey"> <div class="row menu-top"> <div class="col col-center"> <img class="profile-image" ng-src="http://www.loringdodge.com/files/images/cooper-small.jpg" animate-ratio="fadeIn"/> </div> </div> <div class="menu-middle"> <div class="row"> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-ios-pulse-strong"></i> </button> </div> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-heart"></i> </button> </div> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-film-marker"></i> </button> </div> </div> <div class="row"> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-chatbox"></i> </button> </div> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-person-stalker"></i> </button> </div> <div class="col col-center"> <button class="button-circle" animate-ratio="fadeIn"> <i class="ion-android-star-half"></i> </button> </div> </div> </div> <div class="menu-bottom" animate-ratio="slideUp"> <button class="button-circle"> <i class="ion-erlenmeyer-flask"></i> </div> </div> </ion-pane> </ion-side-menu> </ion-side-menus> </script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html> <script> angular.module('starter', ['ionic', 'ionic.animate.ratio']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "templates/side-menu.html" }) .state('app.home', { url: "/home", views: { 'content': { templateUrl: "templates/home.html" } } }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/home'); }); angular.module('ionic.animate.ratio', []) .directive('animateRatio', function($timeout, $ionicSideMenuDelegate) { return { restrict: 'A', scope: { animateRatio: '=', }, link: function (scope, element, attr) { $timeout(function () { scope.$watch(function () { return $ionicSideMenuDelegate.getOpenRatio(); }, function (ratio) { scope.animateRatio(element[0], ratio); }); }); } } }) .controller('SideMenuCtrl', function($scope, $timeout, $stateParams, $ionicSideMenuDelegate) { /*! * Expects number from 0.0 -> 1.0 * Returns absolute value * * @param {Number} * @return {Number} */ var transitionIn = function(ratio) { return Math.abs(ratio); } /*! * Expects number from 0.0 to 1.0 * Returns absolute value in reverse 1.0 -> 0.0 * * @param {Number} * @return {Number} */ // 1.0 to 0.0 var transitionOut = function(ratio) { return (1- Math.abs(ratio)); } /*! * Expects number from 0.0 to 1.0 * Returns absolute value from number to number * Ex. 10 -> 20 or 20 -> 10 * * @param {Number} * @param {Number} * @param {Number} * @return {Number} */ // from min to max var transitionFromTo = function(ratio, from, to) { return from - (Math.abs(ratio) * (from - to)); } $scope.fadeIn = function(element, ratio) { element.style.transform = element.style.webkitTransform = 'scale(' + transitionIn(ratio) + ')'; element.style.opacity = transitionIn(ratio); } $scope.slideUp = function(element, ratio) { element.style.transform = element.style.webkitTransform = 'translateY(' + transitionFromTo(ratio, 100, 0) + '%' + ')'; } }); </script>
/* Background */ .background-grey { background-color: #455A64 !important; } .background-lightgrey { background-color: #B0BEC5; } /* Top */ .menu-top { height: 40%; } /* Middle */ .menu-middle { height: 40%; } /* Bottom */ .menu-bottom { position:relative; height: 20%; background-color: #37474F; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } /* Components */ .col.col-center{ display: -webkit-flex; display: flex; -webkit-flex-direction: row flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } /* Profile Image */ .profile-image { width: 140px; height: 140px; border-radius: 50%; border: 10px solid #546E7A; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .profile-image:hover { border: 3px solid white; } /* Buttons */ .button-circle { width: 50px; height: 50px; color: white; border-radius: 50%; background-color: #546E7A; border: 3px solid #546E7A; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .button-circle i { font-size: 1.5em; color: white; } .button-circle:hover { border: 3px solid white; background-color: #455A64; -webkit-transform: scale(1.2) !important; transform: scale(1.2) !important; } .button-circle.rotate-15 { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .button-circle.rotate-15 + h3 { display:inline-block; margin-left: 10px; color: #37474F; } .menu-bottom .button-circle { position: absolute; left: 50%; top: -25px; background-color: #26C6DA; border: 3px solid #26C6DA; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

Related: See More


Questions / Comments: