Anchor item to bottom of Ionic menu

Question

I have the below html to build a side-menu in Ionic. I'm aiming to anchor the last item in the menu, 'login' to the bottom of the menu, away from the other items. Is there a simple way to do this in Ionic?

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/people">
          <i class="icon ion-ios7-people"></i>
          People
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/places">
          <i class="icon ion-ios7-location"></i>
          Places
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/perks">
          <i class="icon ion-ios7-star"></i>
          Perks
        </ion-item>
        <ion-item nav-clear menu-close ng-click="login()">
          Login
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Solution 1

Were are doing the same thing in a project I am building and found a solution that might help you. You can just adjust the styles to your needs.

<ion-side-menu side="right">
    <ion-content>

        <ion-list>
            <ion-item nav-clear menu-close href="#">Item1</ion-item>
            <ion-item nav-clear menu-close href="#">Item2</ion-item>
            <ion-item nav-clear menu-close href="#">Item3</ion-item>
            <ion-item nav-clear menu-close href="#">Item4</ion-item>
        </ion-list>

    </ion-content>

    <ion-footer-bar class="bar-stable">
        <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;">Logout</ion-item>
    </ion-footer-bar>

</ion-side-menu>

Solution 2

@Louwki's answer is correct for Ionic 1, and only a little different in Ionic 2.

Updated for Ionic 2 (ion-footer-bar became ion-footer).

<ion-side-menu side="right">
<ion-content>

    <ion-list>
        <ion-item nav-clear menu-close href="#">Item1</ion-item>
        <ion-item nav-clear menu-close href="#">Item2</ion-item>
        <ion-item nav-clear menu-close href="#">Item3</ion-item>
        <ion-item nav-clear menu-close href="#">Item4</ion-item>
    </ion-list>

</ion-content>

<ion-footer class="bar-stable">
    <ion-item nav-clear menu-close href="#" style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;">Logout</ion-item>
</ion-footer>

</ion-side-menu>

Solution 3

I did it like this. You don't need to add some CSS.

<ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
        <h1 class="title">Title</h1>
    </header>
    <ion-content class="has-header has-footer">
        <ion-list>
            <ion-item nav-clear menu-close ui-sref="home">Home</ion-item>
        </ion-list>
    </ion-content>

    <ion-footer-bar class="bar-stable" ng-click="logout()">
       <div class="title"><i class="icon ion-power"></i> Logout</div>
    </ion-footer-bar>
</ion-side-menu>

Comments

[Subjective Effect]

Interesting approach. Does this work on deployed iOS and Android apps?

[Louwki]

Yes have published to android and ios and works great

[Schaemelhout]

any idea how to get this to work with multiple items?

[Crazystress]

For multiple items add in the styles "botom:50px" to next element, "bottom:100px" to the follwing one and so on. Using vars could be automatized.

[st2rseeker]

Would suggest switching the logout item to something like <div class="title">Logout</div> for better clarity, but support the approach of the answer. :)

[genuinefafa]

will this work somehow with ionic 2? right now it throws an error