I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!
You just need to wrap the menu page and the main page with
<ons-template>like this:Hope it helps!