Ionic side menu and ion tab

ionic-v1
1

I am currently doing an mobile app. I am struggling with putting these two side-menu and tab together. I can do either tab or menu but not both. I have created a demo in Codepen. As you can see in my code, I have the apps.tabs.home controller. I am not sure how to fix this problem. http://codepen.io/Hin/pen/Ejeewb

Here is my code that I have been working with:

tabs.html

 <script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home">

          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

menu.html

<script id="templates/menu.html" type=text/ng-template>

<ion-side-menus>
    <ion-side-menu side="left">
        <header class="bar bar-header bar-assertive">
            <h1 class="title">Menu</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close href="#/home">
                    Home
                </ion-item>
                <ion-item nav-clear menu-close href="#/about">
                    Add Expenses
                </ion-item>
                <ion-item nav-clear menu-close href="#/contact">
                    Expenses
                </ion-item>
                <ion-item nav-clear menu-close href="#/claim">
                    Claim
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

    </script>

Here is the controller js

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

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

      $stateProvider
        .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
        })

       .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html"
        })

        .state('app.tabs.home',{
        url:'/app/home',
          views: {
            'menuContent': {
              templateUrl: "templates/home.html",
              //controller: 'HomeTabCtrl'
            }
          }
      })
        .state('tabs.home', {
          url: "/home",
          views: {
            'home-tab': {
              templateUrl: "templates/home.html",
              controller: 'HomeTabCtrl'
            }
          }
        })

        .state('tabs.about', {
          url: "/about",
          views: {
            'about-tab': {
              templateUrl: "templates/about.html"
            }
          }
        })
        .state('tabs.contact', {
          url: "/contact",
          views: {
            'contact-tab': {
              templateUrl: "templates/contact.html"
            }
          }
        });


       $urlRouterProvider.otherwise("/tab/home");

    })
2

Check out this codepen. It’s got a working sidemenu/tab navigation with 1.0.1: http://codepen.io/emilyemorehouse/pen/bdmGRj

2 Likes
3

work great, thanks :smile:

4

@emily You are my hero!!

1 Like
5

@emily Hi Emily, icon-on=“ion-ios7-filing” icon-off="ion-ios7-filing-outline"
isn’t working. How to make it work? and I also tried to add taps-striped class, and it doesn’t work.

6

I’ve updated the Codepen to use Ionic 1.3.1 and have fixed the tabs.

icon-on and icon-off weren’t working before because the Codepen didn’t actually use the Ionic tab directives, which it now does.

Hope this helps!!

7

Hi @emily ,

I also got the tabs working with a side menu before I stumbled upon your thread. But mine has an issue where if I switch tab, there is a flicker on every alternate tab switch. I opened your codepen sample to see if yours has that issue and noticed it does too. Any idea on how to fix that flicker?

To reproduce, just switch tabs in your chat view and you will notice that your burger menu will flicker. It is not very noticable in your example but my nav bar has a few more items and thus the flicker is quite obvious.