Side menu into a single page


#1

Hello,

I’m building a tab app and I need a side menu on a specific page inside the first tab.
The navigation is:

homeTab --> menus --> menu
secondTab
thirdTab

I need to apply a side menu on the “menu” state, and need it ONLY in that page. Is it possible to do this in ionic? I’ve been looking around the net for hours but noone seems to have achieved this yet.


#2

As of now, putting the <ion-side-menus> tag outside of the ion-view, ion-content correctly shows my page with the data I need, but it’s like the content is not part of the menu, so it is not draggable and even the navbar button can’t open the side menu.

Strange thing is that if i refresh the page, load it as the “root” page so to say, the side menu and all the content works. Here’s the code of the page

 <ion-view>
  <ion-nav-bar>
    <ion-nav-back-button></ion-nav-back-button>
    <ion-nav-buttons side="right">
      <a class="button button-icon icon-right ion-navicon" menu-toggle="right">Categorie</a>
    </ion-nav-buttons>
    <ion-nav-title>
      {{menu.ristoranteNome}}
    </ion-nav-title>
  </ion-nav-bar>
  
    
  <ion-side-menus>
      <ion-side-menu-content drag-content="true">
        <h2>{{menu.nome}}</h2>
        <p>{{menu.dettagli}}</p>
        <div class="list card">
          <div ng-repeat="piatto in menu.piatti" class="padding">
            <a href="">
              <div class="item item-divider">
                <h3><b>{{piatto.nome}}</b></h3>
              </div>
              <div class="item item-body">
                <div>
                  {{piatto.dettagli}}
                </div>
              </div>
            </a>
          </div>
        </div>
      </ion-side-menu-content>
      <ion-side-menu side="right">
        <ion-content>
          <h1>Categorie</h1>
          <ul class="list">
            <li class="item" ng-repeat="category in menu.categories">{{category}}</li>
          </ul>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>

  <ion-content class="padding">
  
  </ion-content>
</ion-view>

Any idea?