SlideMenu does not slide

ionic-v1
1

Hi,

I have a html page that starts with <ion-view title="Mytitle">

I want to have a button to be able to show a slide menu.

<ion-view title="Mytitle">
  <ion-nav-buttons side="right">
    <button class="button button-icon" ng-click="dashCtrl.openRightSideMenu()">
      <i class="icon ion-navicon"></i>
    </button>
  </ion-nav-buttons>

I then create the rest

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>      
    <ion-content>
      <!-- added something here -->
    </ion-content>
  </ion-side-menu-content>

  <!-- Right menu -->
  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">TITLE</h1>
    </ion-header-bar>
  
    <ion-content scroll="false">
      <ion-list>
        <ion-item ng-repeat="item in items" ng-click="dashCtrl.selectitem(item, $index)">
          {{item.title}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Now, if I click the button of my slide menu, the button stays on the right corner and the slide menu is displayed correctly.

  1. Why the button does not slide?

  2. Why I cannot just drag the button to the left to display the slide menu?

Hope that I was clear enoughĀ and thanks for your help

2

This is because the ion-nav-bar is not inside ion-side-menu-content.

Take a look at this codepen.

3

Hi mharthington,

I already tried before and it did not work.

Also, all the examples that I saw used the ion-header-bar and not the ion-nav-bar. Maybe this is the issue?

If I use the ion-header-bar inside the ion-view, the button does not show.

What your thought about it?

4

Can you put a codepen together? Looking over your code, using ion-nav-bar should resolve the issue.

5

Here is the CodePen

The toggle button is on the second page

6

Okay so in your example, your ion-nav-bar is outside of the side-menu, so I wonā€™t move with the side-menu-content.

Instead use ion-header-bars for your example.

7

Your CodePen has this error:

Controller ā€˜ionNavBarā€™, required by directive ā€˜ionNavButtonsā€™, canā€™t be found!

The ion-header-bar does not show because of that

Would you mind to help me?

8

Updated the codepen, All you needed to do was change ion-nav-buttons to div class="buttons" then place inside the header bar

1 Like
9

Great, it works! Thanks!

By removing the ion-nav-buttons, I will automatically loose the ā€œbackā€ button (ion-nav-back-button) that was shown automatically in my header, correct? Unless, there is a trick to have it back?

It is not really a big deal, because I can create my own back button, but was nice to have it handle it for you. :smile:

10

Correct, you will loose the auto back button.

If you want to have an auto-back button using ion-nav-bar, Iā€™d suggest restructuring your app a bit. This way everything is unified under the sidemenu and you can use the ion-nav-bar.

Think our side-menu demo.
http://codepen.io/ionic/pen/tcIGK

1 Like