Hi people. I want to make a tab app but with different sidemenus depending on the tab chosen ! Can someone give me directives on how I can do that ? Thanks a lot !
For those who would need it, I found a way to do it: we define our menu and in the ion-side-menu-content there is an ion-nav-view, so it’s there that we include the ion-tabs tag that contains our tabs.
So the other menus can be defined with the same tab.
1 Like
Would it be possible for you to provide a sample of this?
1 Like
@mmoore99 First you create a sidemenu app with ionic start myApp sidemenu. You will then have html pages with a basic menu (you will modify if you want) and some other pages that the contents of your menu will redirect you to.
menuHome.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<ion-tabs class="tabs-striped tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/home/map">
</ion-tab>
<!-- Lifecycle Tab -->
<ion-tab title="Lifecycle" icon-off="ion-loop" icon-on="ion-loop" href="#/lifecycle/dream">
<ion-nav-view name="tab-lifecycle"></ion-nav-view>
</ion-tab>
<!-- Event Tab -->
<ion-tab title="Events" icon-off="ion-calendar" icon-on="ion-calendar" href="#/events/list">
<ion-nav-view name="tab-events"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Home</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/home/map">
Map
</ion-item>
<ion-item nav-clear menu-close href="#/home/news">
News
</ion-item>
<ion-item nav-clear menu-close href="#/home/dreams">
Dreams
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
As you see here in the ion-nav-view of my ion-side-menu-content I define my tabs and in the ion-side-menu I put what will be in the side menu. I can that way define another menu. Let’s called it menuSettings.html but in that html page I will have the same content in the ion-nav-view. All that change is what is in ion-side-menu.
menuSettings.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<ion-tabs class="tabs-striped tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-home" icon-on="ion-home" href="#/home/map">
</ion-tab>
<!-- Lifecycle Tab -->
<ion-tab title="Lifecycle" icon-off="ion-loop" icon-on="ion-loop" href="#/lifecycle/dream">
<ion-nav-view name="tab-lifecycle"></ion-nav-view>
</ion-tab>
<!-- Event Tab -->
<ion-tab title="Events" icon-off="ion-calendar" icon-on="ion-calendar" href="#/events/list">
<ion-nav-view name="tab-events"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Lifecycle</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/lifecycle/dream">
Our dream
</ion-item>
<ion-item nav-clear menu-close href="#/lifecycle/practices">
How will we act
</ion-item>
<ion-item nav-clear menu-close href="#/lifecycle/evaluation">
Where are we now
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Hope it’s enough clear (I explain so baaadd 
)
So, how does clicking on a tab cause the side menu to change? It seems that what you have are tabs associated with a specific side menu, but not a side menu depending on the tab. What am i missing? Thanks.
Actually @mmoore99 it depends on the tab. If you see the href on the ion-tab it will activate a different menu template. So the app.js will look like this :
For the href=#/home/map
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
abstract: true,
templateUrl: "menus/menuHome.html",
controller: 'HomeCtrl'
})
}
For the href=#/lifecycle/map
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('settings', {
url: "/lifecycle",
abstract: true,
templateUrl: "menus/menuSettings.html",
controller: 'SettingsCtrl'
})
}
So if you see well when you click in the first ion-tab the link where it will redirect you will activate the menuHome.html and the second ion-tab will redirect to a link that will activate menuSettings.html
can you share it with codepen?
how different menu with different page.
i mean, when i on page home, side left menu with menu home.
when on page shooping, side left menu with menu shopping.
i try with this way for my case, but it doesn’t work to me.
can you help me?