Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Anchor item to bottom of Ionic menu

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>
like image 392
MattDionis Avatar asked Feb 14 '15 16:02

MattDionis


People also ask

How do I add icons to the side menu in ionic?

Adding the menu icon in Ionic To add the icon, we need to modify our existing headers to reflect the header toggle. Now we can open each html file where the menu icon should be visible and add the following to the ion-toolbar . I've done this for the following pages: tab1.

How do you hide ion items?

The Option button is created using an ion-option-button directive. These buttons are showed when the list item is swiped to the left and we can hide it again by swiping the item element to the right.

How do I remove ion item border?

How do you remove the border on an ion item? May be ion-col, ion-row has some css which is showing the border. Usually in grid systems there is padding in place to create "air" between the blocks. I think style="padding: 0" on your ion-col element should do the trick.


3 Answers

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>

enter image description here

like image 197
Louwki Avatar answered Oct 17 '22 11:10

Louwki


@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>
like image 31
Devotoare Avatar answered Oct 17 '22 11:10

Devotoare


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>
like image 4
Julian Avatar answered Oct 17 '22 13:10

Julian