Ionic Hamburger Sidebar Menu For Angular

The Ionic Sidebar Menu is awesome mobile-friendly sidebar navigation and sidebar built with Ionic and Angular.

ionic side menu example, ionic menu toggle, ionic menu example, ionic hamburger menu, ion menu toggle example

How to make use of it:

Download & usage

<div ng-controller="AppController">
    <ion-nav-view></ion-nav-view>
  </div>

<script id="app.html" type="text/ng-template">
    <ion-side-menus>

      <ion-side-menu-content>
        <ion-nav-bar class="bar-Prple">
          <ion-nav-back-button class="button-icon ion-arrow-left-c">
          </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
            </button>
        </ion-nav-buttons>
        <ion-nav-view name="appContent"></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="left" id="loggedOutMenu">
        <ion-header-bar class="bar-assertive">
          <h1 class="title">LOGO</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="compass"></ion-icon> Location</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="bookmarks"></ion-icon> Bookmarks</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="contact"></ion-icon> Contact</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="logo-buffer"></ion-icon> Collections</button>
          </ion-list>

        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
  </script>

angular
  .module("ionicApp", ["ionic"])

  .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state("app", {
    url: "/app",
    abstract: true,
    templateUrl: "app.html"
  })
    .state("app.home", {
    url: "/home",
    views: {
      appContent: {
        templateUrl: "home.html",
        controller: "HomeController"
      }
    }
  });

  $urlRouterProvider.otherwise("/app/home");
})

  .controller("AppController", function($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

  .controller("HomeController", function($scope) {})

  .controller("CartController", function($scope) {
  $scope.data = {
    items: []
  };
})

  .directive("ionPurchase", function() {
  return {
    restrict: "E",
    template:
    '<div class="row"><div class="col"><p class="tpTlle"><ion-icon name="alert"></ion-icon> Check this in your Mobile version also</p></div></div><div class="row Cst_card responsive-sm"><div class="col col-25"><div class="list card"><div class="item item-avatar"><img src="https://ionicframework.com/img/docs/mcfly.jpg" /><h2>Marty McFly</h2><p>November 05, 1955</p></div><div class="item item-body"><p>This is a "Facebook" styled Card. The header is created from a Thumbnail List item,the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.</p><p><a href="#" class="subdued">1 Like</a><a href="#" class="subdued">5 Comments</a></p></div></div></div><div class="col col-25"><div class="list card"><div class="item item-avatar"><img src="https://ionicframework.com/img/docs/mcfly.jpg" /><h2>Marty McFly</h2><p>November 05, 1955</p></div><div class="item item-body"><p>This is a "Facebook" styled Card. The header is created from a Thumbnail List item,the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.</p><p><a href="#" class="subdued">1 Like</a><a href="#" class="subdued">5 Comments</a></p></div></div></div><div class="col col-25"><div class="list card"><div class="item item-avatar"><img src="https://ionicframework.com/img/docs/mcfly.jpg" /><h2>Marty McFly</h2><p>November 05, 1955</p></div><div class="item item-body"><p>This is a "Facebook" styled Card. The header is created from a Thumbnail List item,the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.</p><p><a href="#" class="subdued">1 Like</a><a href="#" class="subdued">5 Comments</a></p></div></div></div><div class="col col-25"><div class="list card"><div class="item item-avatar"><img src="https://ionicframework.com/img/docs/mcfly.jpg" /><h2>Marty McFly</h2><p>November 05, 1955</p></div><div class="item item-body"><p>This is a "Facebook" styled Card. The header is created from a Thumbnail List item,the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.</p><p><a href="#" class="subdued">1 Like</a><a href="#" class="subdued">5 Comments</a></p></div></div></div></div>'
  };
});

Fancy Sidebar Menu For Ionic, Ionic Side Bar Menu Plugin/Github