how to make nested side menu in ionic-framework?

Question

hi there I am trying to add a nested menu in a side menu.

for example please check this:

http://codepen.io/ionic/pen/QwamEW

when I click a menu item, the new page (new form) will open.

But I want to open that page in the side menu...not in a new page!

here is an old example that do not work with the new version.

`http://codepen.io/mhartington/pen/mFGfj`

can somebody help me to do that?

Answer 1

There is example in this Codepen that works with Ionic nightlies. Swipe the left of the screen to make the menu appear.

It works using <ion-pane> inside <ion-side-menus>:

<ion-side-menus>
    <!-- Center content -->
    <ion-pane ion-side-menu-content>
        <header class="bar bar-header bar-dark">
            <button class="button button-icon" ng-click="toggleCategories()">
                <i class="icon ion-navicon"></i>
            </button>
            <h1 class="title">Nested categories</h1>
        </header>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-pane>
</ion-side-menus>

I think you could easily adapt it to your specific needs.

Answer 2

Hi your answer have in codepen. (multi level side menu) http://codepen.io/anon/pen/bdYGJm

<script id="templates/tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
      <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/facts.html" type="text/ng-template">
  <ion-view view-title="Facts">
    <ion-content class="padding">
      <p>Banging your head against a wall uses 150 calories an hour.</p>

      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" ui-sref="tabs.facts2.insights1({ ID: 1})">More Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

or http://codepen.io/rajeshwarpatlolla/pen/JdOwEE