<html ng-app="myApp">
  <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 rel="stylesheet" type="text/css" href="https://code.ionicframework.com/0.9.19/css/ionic.css">

  <script src="https://code.ionicframework.com/0.9.19/js/ionic.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular/angular.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular/angular-animate.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular/angular-route.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular/angular-touch.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular/angular-sanitize.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/ionic-angular.js"></script>
  <script src="https://code.ionicframework.com/0.9.19/js/angular-ui/angular-ui-router.min.js"></script>

  <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
</head>
 
<body ng-controller="MainController">
  <side-menus>
    <pane side-menu-content>
      <nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></nav-bar>

      <nav-view animation="slide-left-right"></nav-view>
    </pane>
    <side-menu side="left">
      <div class="bar bar-header bar-dark">
        <h1 class="title">Menu</h1>
        </div>

    <content has-header="true" padding="true">

    <h1>About Page</h1>
    <ul class="list">
    <li>abcd</li>
    </li>defg</li>
    </ul>

    </content>


      </div>
    </side-menu>
  </side-menus>

<script id="about.html" type="text/ng-template">
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
    <content has-header="true" padding="true">

    <h1>About Page</h1>

    </content>
</view>
</script>

    <script id="home.html" type="text/ng-template">
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
    <content has-header="true" padding="true">

    <h1>Home Page</h1>

    </content>
    <tabs class="tabbed-menu" tabs-style="tabs-icon-top" tabs-type="tabs-stable">
        <tab title="Navigation" icon="ion-navicon">

    </tab>
        <tab title="About" icon="ion-ios7-information">

    </tab>

</view>
</script>
</body>
</html>
.tabbed-menu tab {
  width: 275px;
  left: auto;
  left: 0;
}

.bar-header + .tabbed-menu tab {
  top: 44px;
}
angular.module('myApp', ['ionic'])

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

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeController'
      });

    $stateProvider
      .state('about', {
        url: '/about',
        templateUrl: 'about.html',
        controller: 'AboutController'
      });

    $urlRouterProvider.otherwise('/home');

  }
])

.controller('MainController', ['$scope', '$location',
  function($scope, $location) {

    console.log('MainController');

    $scope.goTo = function(page) {
      console.log('Going to ' + page);
      $scope.sideMenuController.toggleRight();
      $location.url('/' + page);
    };

  }
])

.controller('HomeController', ['$scope', '$location',
  function($scope, $location) {

    console.log('HomeController');
    
    $scope.navTitle = 'Home Page';

    $scope.leftButtons = [{
      type: 'button-icon icon ion-navicon',
      tap: function(e) {
        $scope.sideMenuController.toggleLeft();
      }
    }];

    $scope.rightButtons = [];

  }
])

.controller('AboutController', ['$scope', '$location',
  function($scope, $location) {

    console.log('AboutController');
    
    $scope.navTitle = 'About Page';

    $scope.leftButtons = [{
      type: 'button-icon icon ion-navicon',
      tap: function(e) {
        $scope.sideMenuController.toggleLeft();
      }
    }];

    $scope.rightButtons = [];

  }
]);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.