Using sidemenu and tabs together

Ah, I understand. The client is always right…

Yeah it’s counterproductive to start arguing about it, but he’ll probably find out himself that it’s a bad idea and then we just remove it. :wink:

Thanks a million, I was looking for this.

Sorry, where is a example of sidemenu+tabs working with 1.1.0? I found http://plnkr.co/edit/SJk6EgmDcmuisrxTgern?p=preview but it’s 1.0.0 beta and with 1.1.0 just doesnt work
I’ve tried in my local to avoid CORS problems

Thanks a lot

leob, That is great to hear that it works right out of the box.

Do you have a version of the complete 1.1 tabs seed that has a working side menu incorporated? Not a code sample but a complete seed folder with all the dot files, configs, etc?

My app using older ionic doesn’t work anymore and I am struggling with 1.1 seeds.

The side menu seed doesn’t follow the docs structure anymore, it has the <side menu> code removed from the index.html so that it no longer wraps <ion-nav-view> </ion-nav-view> in index.html but is in a menu.html file which shows up in the app.js file as part of the $stateProvider.

I can’t quite get my version of tabs seed with added side menu to work, and it sounds like you have a version that does. Could you post it some where?

Thank you!

mbyrne, I’ve made a complete starter app here which contains the side menus and tabs in one app and a bunch of other stuff:

One other improvement is that it has a better production build (based on ‘gulp’) with minification and so on.

It’s based on the newest Ionic (1.1.0).

There’s a README on how to install and use it, and there’s also a Wiki, however the pages there aren’t finished yet:

1 Like

This is only working with 1.0.0-beta.9 version in 1.1.x versions has problem.

1 Like

This is great, thank you for all the effort and sharing it.

3 Likes

Guys (and I mean that in a non-gender sense), thanks for this discussion thread. I’ve just recently dove into angular and ionic, this thread helped tremendously - truly awesome! Cheers…

1 Like

hi, thanks for your interesting code.but when changing the version of JS and CSS from 1.0.0.beta.9 to 1.1.0 side menus are note appear. actually I don’t understand why this happen and why in old version it is work very easily in new versions this not working.

Not sure if this helps but the most recent codepen we’ve been tossing around is here, using 1.1.0: http://codepen.io/emilyemorehouse/pen/bdmGRj

This provided so much insight. Thx very much for putting this together!

Hey cool, thanks, that’s good to hear.

Recently I’ve added some stuff to the starter app, for instance image manipulation functionality (Cordova Camera, image cropping and image display) and some smaller fixes and improvements. I’ll add a bit more over the coming days.

I’ve also been busy completing the documentation (README and Wiki). Added quite a few pages to the Wiki, for instance Release Notes, Tips and Troubleshooting and Common Recipes.

@emily, thanks for the codepen code …but it looks very complicated to figureout what you’ve actually changed in the default sidemenu template to make it work.

Can you please break it down for us?

Many of us are trying a lot to make things work like yours, but after hours of work still not able to figure out where and what we’re doing wrong!

Could you please give us step-by-step instruction to help us make changes to a simple sidemenu template and add tabs template to it along with the sidemenu.

Thanks a lot for all your efforts …it’s highly appreciated.

i can’t get this to work on my app. i used exactly same example.
i can’t see any of the side menu icon

Where can I get the full code?

Hi @emily, I’ve made something similar to yours. I was looking to your example to get inspired, but I see that you repeat the tabs in each of your tab view. Is not possible to have a separate view for the tabs and inject each tab view in it? I’ve done that, but I cannot have nested abstract states.

Did anyone noticed that is using ion-nav-buttons inside a ion-view of a tab does not works? :frowning:

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-side-menus enable-menu-with-back-views="true">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
      <!-- Store Tab -->
      <ion-tab title="Winkels" icon-off="ion-home" icon-on="ion-home" ui-sref="menu.shop">
        <ion-nav-view name="tab-shop"></ion-nav-view>
      </ion-tab>

      <!-- Cart Tab -->
      <ion-tab title="Winkelwagen" icon-off="ion-bag" icon-on="ion-bag" ui-sref="menu.cart">
        <ion-nav-view name="tab-cart"></ion-nav-view>
      </ion-tab>

      <!-- Contact Tab -->
      <ion-tab title="Contact" icon-off="ion-email" icon-on="ion-email" ui-sref="menu.contact">
        <ion-nav-view name="tab-contact"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
    <ion-nav-view name="sidemenu"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="right">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close ui-sref="menu.myAccount">
          Mijn gegevens
        </ion-item>
        <ion-item menu-close ui-sref="menu.myOrders">
          Bestellingen
        </ion-item>
        <ion-item menu-close ui-sref="menu.socialMedia">
          Social Media
        </ion-item>
        <ion-item menu-close href="http://www.verhuurmaat.nl/">
          Naar website
        </ion-item>
        <ion-item menu-close ui-sref="menu.about">
          Over verhuurmaat
        </ion-item>
        <ion-item menu-close ui-sref="menu.tac">
          Algemene voorwaarden
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

I put it together like this and expected the behaviour to be that if I navigated from the tabs to a sidemenu nav-view the tabs would become inactive and clickable. and the back button would appear to go back to the previous tab page.

instead it places the view over a tab making it unresponsive to any tab whilst it is loaded in sidemenu nav-view. if I place the nav-view in the index I navigate away from the tabs without a back button and no side menu at all so that’s also not an option.

The side menu pages should behave like a sort of overlay over the tabs, with their own history stack. Tabs are the first row of navigation. if I click a side menu item I want to navigate to that view. show some info there and have a back button to the tab-history stack I navigated from to the side menu page. It would’ve made the most sense to me as I would like the side menu to be available in every tab. Does anyone know how to achieve what I want?

this what i was looking for. thx @emily