Side Menus: How to display both a Left and a Right menu in one view


#1

Is there any sample code that shows how both left and right side menus are implemented - showing the HTML plus Controller wiring, etc.?

There was a similar question to this asked earlier in the month, but the answer didn’t address the set-up or page structure, so I am wondering if there’s any examples of this that I can look at and study.

Or maybe there’s some other way to configure what I’m after. I want a menu on the left (a real menu) but on the right I want a list whose display can be toggled (show/hide) via a hamburger icon - so just like a side menu. But this isn’t a menu as such - just a list (that will ultimately show someone’s Facebook friends). So this list doesn’t need to be visible all the time in the app, but should be able to be accessed in a similar way as the menu. So that’s why I though having both Left and Right Side Menus might be a good choice of UI. But maybe there’s a better way, so I’m open to that as well.

Thanks!


#2
<body>

<ion-side-menus>

<ion-side-menu-content>
<ion-nav-bar animation="nav-title-slide-ios7"  class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title"></h1>
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left" ng-controller="LeftController">
<ion-header-bar class="bar-assertive">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
 </ion-content>
</ion-side-menu>

<ion-side-menu side="right" ng-controller="RightController">
<ion-header-bar class="bar-assertive">
<h1 class="title"></h1>
 </ion-header-bar>
 <ion-content>
 </ion-content>
</ion-side-menu>

</ion-side-menus>

 <script></script>    

</body>

#3

Thanks, Siddhartha. This almost worked. I had to change the <ion-nav-bar> setup because the left and right buttons were appearing next to each other. But with that change, this worked - and is exactly what I needed. So thank you very much for taking the time to post this!


#4

Yeah, I forgot to post the custom styling though.