Placement of Side Menu

1

I’m a little confused on where the directive would be placed in the app. If I add it like this in the pets-index.html file, it does work, however, the area is now blank:

<ion-view title="'Pets'" left-buttons="leftButtons" right-buttons="rightButtons">
<ion-content has-header="true" has-tabs="true">
    <ion-list>
        <ion-item type="item-text-wrap">
            <h3>Pet</h3>
        </ion-item>
    </ion-list>
</ion-content>
</ion-view>
<ion-side-menus>
  <ion-pane ion-side-menu-content>
  </ion-pane>
<ion-side-menu side="left">
    <ul class="list">
        <li class="item item-toggle">
            Dogs
            <label class="toggle">
                <input type="checkbox">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </li>
    </ul>
</ion-side-menu>
</ion-side-menus>

I’ve added it in the index.html, but then the menu doesn’t slide in.

Does the side menu needs it’s own state in the $stateProvider?

2

Close, just a few things off:

    <ion-view title="'Pets'" left-buttons="leftButtons" right-buttons="rightButtons">
    
    <ion-side-menus>
      <ion-pane ion-side-menu-content>

<ion-content has-header="true" has-tabs="true">
        <ion-list>
            <ion-item type="item-text-wrap">
                <h3>Pet</h3>
            </ion-item>
        </ion-list>
    </ion-content>


      </ion-pane>
    <ion-side-menu side="left">
        <ul class="list">
            <li class="item item-toggle">
                Dogs
                <label class="toggle">
                    <input type="checkbox">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
        </ul>
    </ion-side-menu>
    </ion-side-menus>

 </ion-view>
1 Like
3

Excellent!! Thank you.