Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to overlap side menu over the current page in ionic?

By default in Ionic side menu pushes the current page when the side menu button is clicked. But i need to overlap the side menu over the current page as in most of the apps. How to do that? Where should i change the code? Just consider a default side menu template from ionic.

   <ion-side-menus enable-menu-with-back-views="false">
     <ion-side-menu-content>
    <ion-nav-bar class="bar-positive bar-blue">
     <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-buttons side="right">
       <a menu-close href="#/app/playlists" class="cancelbutton">
          <button class="button button-icon button-clear " ng-hide=cancelflag>cancel</button>
         </a>
         </ion-nav-buttons>
       </ion-nav-bar>
        <ion-nav-view name="menuContent"animation="fade-in-out"></ion-nav-view>
         </ion-side-menu-content>

    <ion-side-menu side="left">
<ion-header-bar class="bar-positive bar-image sidemenu-header">
  <h1 class="title title-left">{{currentuser}}</h1>
</ion-header-bar>
<ion-content>
  <ion-list>
    <!-- <ion-item menu-close href="#/testing">
      testinglogin
    </ion-item> -->
            <ion-item menu-close href="#/app/home" ng-show=adminflag>
      <label class="item-input labelclearpadding">
        <i class="icon paddingicon"><img src="img/user.png" alt="" class="placeholder dateicon"/></i>
        all details
      </label>
    </ion-item>
  </ion-list>
  <ion-list>
               </ion-list>
   </ion-content>
  </ion-side-menu>
  </ion-side-menus>
like image 812
vishnuprasad kv Avatar asked Nov 28 '25 00:11

vishnuprasad kv


1 Answers

I am working on ionic 2 and this is helpful for the same only.
I was also searching for the same issue-
I read the document here.
Menu Types explain very clearly to add type= "overlay" and got my task accomplished

<ion-menu [content]="content" side="right" type="overlay">
   ................
     ...............
       lines of code goes here
     ...............
   ................

</ion-menu>

Where -
Side => being toggle from right
type => display type of menu on current screen.

like image 177
S.Yadav Avatar answered Dec 01 '25 00:12

S.Yadav



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!