Using sidemenu and tabs together

Seems to be broken in 1.1.0. The ion-navicon does not appear anymore.

I have no clue why we have a thread here with something like 5000 posts and complex workarounds, when side menus + tabs just works out of the box.

I have an app with a side menu and multiple pages with tabs and it works fine. Or am I missing something?

The only thing that doesnā€™t work (and still doesnā€™t in Ionic 1.1.0) is swiping between tabs, you need to add some custom code for that. This is not a big deal, but the problem (from a UX point of view) is that you get no animations when changing tabs (through swiping).

This is the only real problem I have (which I believe is only solvable through complex hacks). Itā€™s annoying but not a deal breaker. For the rest it works fine, as far as I can see.

Sure, having a side menu and tabs works out of the box, but getting the history state/back buttons/menu buttons to work as desired is slightly more complex (you just have to pay attention to a few small things plus your config provider). Out of the box, itā€™ll put previous tab names in the header bar which is rarely actually used or desired. From what Iā€™ve seen, we arenā€™t presenting complex workarounds, just a generic example with a few small things configured and updated. Also, there are now 43 replies here. Not 5,000.

From a UX standpoint, it isnā€™t common to even use swipes to transition between tabs as swipes on tabbed views often are tied to other actions (take a look at any of the major social media apps), but Iā€™m sure there are a few cases where they could be useful.

Sometimes the Ionic CDN has CORS issues, but it seems to be fixed.

If the icons donā€™t show up again, check the console and see if the font files arenā€™t being loaded.

Okay, I was exaggerating a bit, it was more like 50 ā€¦ :wink:

Well I agree with you about the swiping.

Iā€™d say that for a slider or a gallery swiping is fine, to use it everywhere is counterproductive.
For tabs a simple ā€œtapā€ is faster and more reliable than ā€œswipeā€.

But itā€™s what my client wants, apparently he thinks itā€™s really important, not much use arguing about it.

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