Multilevel Sidemenu 2

Multilevel Sidemenu 2

Sidemenu - Ionic 3

$6.00

Not yet rated
Hieu Pham

Hieu Pham

Member since 2015

Details

Version:
3.0
Size:
5mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
5e0966e2 /Legacy :ea388f62
Released:
4 years ago
Updated:
5 months ago
Category:
Plugins
Tags:
angular, ionic, sidemenu, collapsible, menu, drawer

TakeThatDesign.com is my new home

Click the screenshot below to visit, don't forget to bookmark, and subscribe to my newsletter. See you there!

takethatdesign.com thumbnail

Ionic Sidemenu 2 (Ionic 3)

Multi-level Sidemenu

You can find Ionic 1 version at https://market.ionic.io/plugins/ionic-multilevel-sidemenu

Payment methods

Pay via Stripe using the button PURCHASE $6 on the side.

Other options:

Purchase Externally

If you want to Paypal directly, please let me know the name of the item by sending me an email mr_hie@yahoo.com before you process the payment. Thanks.

Purchase Externally

Introduction

A beautiful multilevel collapsible menu (maximum of 3, I recommend that we don't need more than 3 levels) on the side menu (app drawer), NOW ON IONIC 2. Works as a clean component You are all set!

I always take it serious to keep the code quality high, with clean and self-explained code. When purchasing this, you also get my latest "helper" snippets inside the package to make it more fun to code.

Preview

Watch on Youtube

See how it works on Youtube: https://youtu.be/PxrNPYPFiEY

See more

You might like my collection of Ionic products. See more at https://market.ionic.io/user/66136

See more of my works

Happy prototyping!

Changelog

Note: All updates are on Ionic 3

Last updated: Jul 6 2017

v1

  • First version

v2

  • Migrate to Ionic 3

Screens

  • Come as a component
  • Customizable color
  • Nice animation effect

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g ionic@5.4.1

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template

Notes

Background color for the active menu item

# src/components/multilevel-menu/multilevel-menu.scss
$activeColor: #f53d3d;

Categories Data Structure

{
        name: "Electronics",
        id: 4,
        items: [
          {
            name: "TV",
            id: 40,
            items: [
              ................
              {
                name: "Sony",
                id: 402
              },
              {
                name: "Other - custom URL",
                url: '/app/other'
              }
            ]
            .............

Include directive in a template

<multilevel-menu [categories]="categories" (onSelect)="onMenuSelect($event)" [selectedCategory]="selectedCategory"></multilevel-menu>

Event handler for onSelect

In the parent component you can get the selected category by creating your handler

# src/app/app.component.ts
onMenuSelect(cat) {
    console.info('In app.components: selected category', cat);
    this.selectedCategory = cat;
    this.nav.setRoot(Home, {
      selectedCategory: cat
    })
  }

Contact

If you need technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com

Homepage: https://www.takethatdesign.com

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

Hey there! You'll need to log in before you can leave a comment here.

BenHen75

BenHen75   ·   3 years ago

Look nice!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marco Molinari

Marco Molinari   ·   3 years ago

Nice plugin! Is it possible, when you click a category, to distinguish between a click on the text and a click on the arrow? So that clicking the arrow expand the category, and clicking the text does something else?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Matthieu

Matthieu   ·   2 years ago

Hi, nice work! But...... you don't have documentation? :-/

Hieu Pham

Hieu Pham   ·   2 years ago

Hi Matthieu! It's not a big work so I only have the short description and instruction as you over here. I assume that my buyer/friend is familiar with Ionic Framework. Feel free to discuss with me on everything about web apps. Cheers!

Matthieu

Matthieu   ·   2 years ago

Thanks for your answer :-) Hum I am a little familiar with Ionic, but I don't understand how to declare the pages in case of click. In your files components/multilevel-menu/menu.ts , you write: items: [ { name: "Samsung", id: 400, url: 'app/category/401' }, To what corresponds the url? I have test with for example pages/contact/contact or with the export class name from my page, but it does not work :-( Have you a small example with just 2 pages? Have a nice day :-)

Hieu Pham

Hieu Pham   ·   2 years ago

Hi Matthieu, don't hesitate to drop me an email. We will discuss in detail. Thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marco Antonio Mezzena Segundo

Marco Antonio Mezzena Segundo   ·   a year ago

Is this work on Ionic 4? Thanks.

Hieu Pham

Hieu Pham   ·   a year ago

No it’s not compatible. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marco Antonio Mezzena Segundo

Marco Antonio Mezzena Segundo   ·   a year ago

Is this work on Ionic 4? Thanks.

Hieu Pham

Hieu Pham   ·   a year ago

No it’s not compatible. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Matthieu

Matthieu   ·   2 years ago

Hi, nice work! But...... you don't have documentation? :-/

Hieu Pham

Hieu Pham   ·   2 years ago

Hi Matthieu! It's not a big work so I only have the short description and instruction as you over here. I assume that my buyer/friend is familiar with Ionic Framework. Feel free to discuss with me on everything about web apps. Cheers!

Matthieu

Matthieu   ·   2 years ago

Thanks for your answer :-) Hum I am a little familiar with Ionic, but I don't understand how to declare the pages in case of click. In your files components/multilevel-menu/menu.ts , you write: items: [ { name: "Samsung", id: 400, url: 'app/category/401' }, To what corresponds the url? I have test with for example pages/contact/contact or with the export class name from my page, but it does not work :-( Have you a small example with just 2 pages? Have a nice day :-)

Hieu Pham

Hieu Pham   ·   2 years ago

Hi Matthieu, don't hesitate to drop me an email. We will discuss in detail. Thanks!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marco Molinari

Marco Molinari   ·   3 years ago

Nice plugin! Is it possible, when you click a category, to distinguish between a click on the text and a click on the arrow? So that clicking the arrow expand the category, and clicking the text does something else?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

BenHen75

BenHen75   ·   3 years ago

Look nice!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}