Add side menu in OnsenUI

Question

I am trying to add a side menu in my Onsenui app but it isnt showing up. I am using <ons-tabbar-item> approach so not sure how I would go about adding a menu in the <ons-tabbar-item> section below:

<body>

<ons-sliding-menu var="app.menu" main-page="dashboard.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-page>
   <a href="">test</a>
  </ons-page>
</ons-template>

<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">

        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" ng-click="app.menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</body>

Andi Pavllo · Accepted Answer · 2016-02-15T02:00:21.440

There is no need for ons-navigator if you are already using ons-tabbar and ons-sliding menu as you can perform the navigation using these two elements.

Here is a CodePen example about how to combine tabbar and sliding-menu:

http://codepen.io/andipavllo/pen/RrdPNo

Here is the code:

<ons-tabbar var="tabbar">
  <ons-tabbar-item icon="ion-stop" label="menu" page="hoge.html" active="true"></ons-tabbar-item>
  <ons-tabbar-item icon="ion-stop" label="menu" page="page2.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="hoge.html">
  <ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" type="overlay" max-slide-distance="250px">
    </ons-navigator>
</ons-template>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 1</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tabbar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 2</div>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <h1 style="text-align: center">Tab bar+SlidingMenu Test</h1>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(0)">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(1)">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

Hope it helps!

That wont work, since I am linking to external pages, the above has the pages within < ons-template >. My pages are external and I tried without the navigator and ran into another problem which I posted here: http://stackoverflow.com/questions/34986454/using-onsenui-cant-push-between-pages?noredirect=1#comment57706446_34986454 — condo1234, Feb 15 '16 at 05:44
if your pages are external, just remove the `ons-template` and copy the content to the html pages, I don't see where is the problem — Andi Pavllo, Feb 15 '16 at 05:47
I tried implementing the answer from here: http://stackoverflow.com/questions/26215984/onsen-use-navigator-and-sidebar-on-same-page. But the only difference between my code is that I use And the ng-click isnt firing — condo1234, Feb 15 '16 at 05:56
Tried your code also but get error "Cannot call method of toggleMenu of undefined..." — condo1234, Feb 15 '16 at 06:04
Because you haven't defined `var="menu"` in `ons-sliding-menu`. Of course ng-click is not firing, `app.menu` doesn't exist. — Andi Pavllo, Feb 15 '16 at 06:18

Add side menu in OnsenUI

1 Answers1