Two Side menus combination

 
Again everything starts with side menu directive.
 
One part of a directive, namely ion-side-menu-content, points to content section, including automatic back navigation and inner navigation (all thanks to routing set in app.js file). Second directive part, namely ion-side-menu points to the left and right menu content. Basically, this example is almost identical to simple Side menu example except this one has two ion-side-menu components where each one is pointing to a different menu content.
 
Content section is whatever you want it to be.
 
Demo
 
Embeded working example:
 
Ionic Two Side menus combination
 
HTML
 
<!DOCTYPE html>
<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>Ionic Framework Example</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="app.js"></script>
	</head>

	<body>
	  
    <div ng-controller="MainCtrl">       
      <ion-nav-view></ion-nav-view>
    </div>
    
    <script id="menu.html" type="text/ng-template">
      
      <ion-side-menus>
        
        <ion-side-menu-content>
          
          <ion-nav-bar class="bar-positive" >
          
            <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>            
            
            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
              </button>
            </ion-nav-buttons>
            
            <ion-nav-buttons side="right">
              <button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()">
              </button>
            </ion-nav-buttons>            
            
          </ion-nav-bar>
 
          <ion-nav-view animation="no-animation" name="menuContent"></ion-nav-view>
          
        </ion-side-menu-content> 
        
        <ion-side-menu side="left">
          
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          
          <ion-content>
            <ul class="list">
              <a href="#/home/main" class="item" menu-close>Home</a>
              <a href="#/home/first" class="item" menu-close>First Page</a>
              <a href="#/home/second" class="item" menu-close>Second Page</a>
            </ul>
          </ion-content>
          
        </ion-side-menu>

        <ion-side-menu side="right">
          
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Right Menu</h1>
          </ion-header-bar>
          
          <ion-content>
           Some content
          </ion-content>
          
        </ion-side-menu>
        
      </ion-side-menus>
      
    </script>
    
    <script id="main.html" type="text/ng-template">
      <ion-view title="Welcome">
        <ion-content padding="true">
          <p>Swipe to the right to reveal the left menu.</p>
          <p>(On desktop click and drag from left to right)</p>
        </ion-content>
      </ion-view>
    </script>
    
    <script id="first.html" type="text/ng-template">
      <ion-view title="First Page" left-buttons="leftButtons">
        <ion-content has-header="true" padding="true">
          <h1 style="text-align: center;">Content</h1>
        </ion-content>
      </ion-view>
    </script>
    
    <script id="second.html" type="text/ng-template">
      <ion-view  title="Second Page">
        <ion-content has-header="true" padding="true">
          <h1 style="text-align: center;">Content</h1>
        </ion-content>
      </ion-view>
    </script>      

	</body>
</html>
 
JavaScript
 
angular.module('myApp', ['ionic'])

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

  $stateProvider
    .state('menu', {
      url: "/home",
      abstract: true,
      templateUrl: "menu.html"
    })
    .state('menu.main', {
      url: "/main",
      views: {
        'menuContent' :{
          templateUrl: "main.html"
        }
      }
    })
    .state('menu.first', {
      url: "/first",
      views: {
        'menuContent' :{
          templateUrl: "first.html"
        }
      }
    })
    .state('menu.second', {
      url: "/second",
      views: {
        'menuContent' :{
          templateUrl: "second.html"
        }
      }
    });    
  
  $urlRouterProvider.otherwise("/home/main");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
  $scope.toggleRight = function() {
    $ionicSideMenuDelegate.toggleRight();
  };  
  
});
 

Side menu + Tab bar + Master Detail

 
I won’t talk much about this combination. You will understand it perfectly well if you’ve read previous combinatins.
 
Demo
 
Embeded working example:
 
Ionic Side menu + Tab bar + Master Detail
 
HTML
 
<!DOCTYPE html>
<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>Ionic Framework Example</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="app.js"></script>
		<script src="controllers.js"></script>  
	</head>

	<body>

    <ion-side-menus>
      
      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
          <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item href="#/" ng-click="sideMenuController.toggleLeft()">Home</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
      
    </ion-side-menus>
    
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons> 
        
        <ion-tabs class="tabs-positive">
          <ion-tab title="Stooges">
            <h4>The Stooges</h4>
            <ion-list>
                <ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
            </ion-list>
          </ion-tab>
          <ion-tab title="Tab 2">
            <h2>Just another tab, for another reason</h2>
          </ion-tab>
        </ion-tabs>
      </ion-view>
    </script>

    <script id="item.html" type="text/ng-template">
      <ion-view title="{{item}}">
        <ion-content>
          <h1>{{item}}</h1>
        </ion-content>
      </ion-view>
    </script>
		
	</body>
</html>
 
JavaScript
 
var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomeCtrl',
      templateUrl: 'home.html'
    })
    .state('item', {
      url: '/:item',
      controller: 'ItemCtrl',
      templateUrl: 'item.html'
    });

  $urlRouterProvider.otherwise('/');
});

app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
  $scope.stooges = [{name: 'First List element'}, {name: 'Second List element'}, {name: 'Third List element'}];

  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
  
});

app.controller('ItemCtrl', function ($scope, $stateParams) {
  $scope.item = $stateParams.item;
});
 

Slide Box plus Tab Bar

 
I will not write a chapter about this combination because Nic Raboy already wrote an excellent article here called Using Slide Boxes and Tabs in Ionic Framework Apps..

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.