Question

您好，我正在尝试在侧边菜单中添加嵌套菜单。

例如，请检查：

当我点击菜单项时，新页面（新表格）将会打开。

但我想在侧边菜单中打开该页面...而不是在新页面中！

这是一个不适用于新版本的旧示例。

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

有人可以帮我这么做吗？

Answer 1

有一个与Ionic nightlies一起使用的示例in this Codepen。滑动屏幕左侧以显示菜单。

使用<ion-pane>内的<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>

我认为您可以轻松地根据您的具体需求进行调整。

Answer 2

您好答案在codepen中。（多级侧菜单） 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>

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

如何在离子框架中创建嵌套的侧面菜单？

2 个答案: