3D Sidemenu pack - Ionic 2.x/3.x

3D Sidemenu pack - Ionic 2.x/3.x

10 amazing 3D Sidemenu animation in one pack


Levente Kosa

Levente Kosa

Member since 2015


iOS, Android  
4 years ago
2 years ago
3D sidemenu pack, 3d, sidemenu, pack, menu, animation, rotate, scale, slide, reverse, float, fall, skew, open, side menu, v3, v2,

3D Sidemenu pack

This plugin is compatible with Ionic v2.x and v3.x!

10 smooth 3D sidemenu animation, all in one package! Only a few minutes to integrate.
Available animations:

  • 3d
  • 3d open
  • 3d skew
  • 3d fall down
  • 3d float up
  • 3d scale back
  • 3d scale up
  • 3d rotate out
  • 3d reverse slide
  • 3d content down

Test Before You Buy

You can test the app using Ionic View and enter the app ID: f3d4e489
Please use the new Ionic View App (blue icon). From 1st January 2018, Ionic Team shut down the older version.

new Ionic View


If you want to use the plugin as it is, just installs node modules and run the local server

sh $ npm install $ ionic serve --lab

If you want to use the plugin in your existing code, then follow the further steps
  1. Copy providers/extend-menu/extend-menu to your providers library, and import into app.module.ts

    js import { ExtendMenuProvider } from '../providers/extend-menu/extend-menu';

  2. Add it to the providers list in the app/app.module.ts filejs providers: [ExtendMenuProvider]
  3. Copy app/app.scss content to your own app.scss file
  4. Select a menu type from the options and include it within the <ion-menu> element, as shown below, at the top of your app.html file. Add "fullWidthMenu" class if needed.
  5. Enjoy!


html <ion-menu type="3d" class="fullWidthMenu" [content]="content">...</ion-menu>

html <ion-menu type="3d-open" [content]="content">...</ion-menu>

html <ion-menu type="3d-skew" [content]="content">...</ion-menu>

html <ion-menu type="3d-fall-down" [content]="content">...</ion-menu>

html <ion-menu type="3d-float-up" [content]="content">...</ion-menu>

html <ion-menu type="3d-scale-back" [content]="content">...</ion-menu>

html <ion-menu type="3d-scale-up" [content]="content">...</ion-menu>

html <ion-menu type="3d-rotate-out" [content]="content">...</ion-menu>

html <ion-menu type="3d-reverse-slide" [content]="content">...</ion-menu>

html <ion-menu type="3d-content-down" class="fullWidthMenu" [content]="content">...</ion-menu>

Please consider leaving a rating and review, it would be really helpful to get your feedback. Thank you.