Anchor element at the bottom of the ionic menu

Question

I have html below to create a side menu in Ionic. I am going to snap the last item on the menu, “enter” to the bottom of the menu, away from other elements. Is there an easy 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> 

Answer 1

They did the same in the project I am creating and found a solution that could help you. You can simply customize the styles to suit 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> 

Answer 2

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

Updated for Ionic 2 (ion-footer has become 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> 

Answer 3

I did it like that. You do not need to add 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>