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:
2 years ago
Updated:
a year ago
Category:
Plugins
Tags:
angular, ionic, sidemenu, collapsible, menu, drawer

Sidemenu 2 Plugin

Payment methods

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

Other options:

Purchase Externally

Purchase Externally

If you have any problems with the above payment methods, please send me an email to mr_hie@yahoo.com before you pay via PayPal using the button below

Purchase Externally

Introduction

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

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

Take a look at it with Ionic View using ID: 5e0966e2

new Ionic View

In case you don't know, Ionic View mobile app is the simplest way to experience an ionic app. Download here

In case you don't know, Ionic View mobile app is the simplest way to experiences an ionic app. Download it here [http://view.ionic.io/] (http://view.ionic.io/)

Or even more entertaining, see how it works on Youtube: https://youtu.be/PxrNPYPFiEY

See more of my works: https://market.ionic.io/user/66136

See more of my works

Happy prototyping!

Changelog

Last updated: Jul 6 2017

ionicMarket-sidemenu-2-798845557b52

-First version

ionicMarket-sidemenu-2-3818bd2ec713

-Migrate to Ionic 3

Feature

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

Usage

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
    })
  }

Screens

  1. Sidemenu

Run on localhost

1.Install Ionic environment

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

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
$ bower install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the app

Dependencies

If you want to integrate this component into your project, don't forget these dependencies

  • Web animation polyfill: $ npm install --save @angular/animations@4.1.3
  • Copy Component folder: src/components/multilevel-menu
  • Import and declaration MultilevelMenuComponent in your module
  • Add component to your view <multilevel-menu [categories]="categories" (onSelect)="onMenuSelect($event)" [selectedCategory]="selectedCategory"></multilevel-menu>
  • Declare necessary variable (categories) and event handler (onSelect)

Support

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

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

BenHen75

BenHen75   ·   2 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   ·   2 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   ·   a year ago

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

Hieu Pham

Hieu Pham   ·   a year 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   ·   a year 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   ·   a year 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   ·   3 months ago

Is this work on Ionic 4? Thanks.

Hieu Pham

Hieu Pham   ·   3 months 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   ·   3 months ago

Is this work on Ionic 4? Thanks.

Hieu Pham

Hieu Pham   ·   3 months 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   ·   a year ago

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

Hieu Pham

Hieu Pham   ·   a year 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   ·   a year 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   ·   a year 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   ·   2 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   ·   2 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 }}