Multilevel Sidemenu

Multilevel Sidemenu

Collapsible menu for sidemenu

$6.00

Not yet rated
Hieu Pham

Hieu Pham

Member since 2015

Details

Version:
1.0
Size:
8mb
Ionic:
1.x
Platforms:
iOS, Android, Windows Phone
View ID:
df4a9783 /Legacy: c2bbf18f
Released:
4 years ago
Updated:
2 years ago
Category:
Plugins
Tags:
angularjs, ionic, sidemenu, collapsible

Ionic Sidemenu

Payment methods

  • PURCHASE EXTERNALLY button: Gumroad.com payment gateway which supports cards or PAYPAL
  • PURCHASE $xx button: Stripe.com which supports cards only
  • If you have any problems with other payment methods, please drop me an email to mr_hie@yahoo.com then you can pay via PAYPAL directly

Introduction

You will have 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). Works as a clean directive . You are all set.

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

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: df4a9783

(For Ionic View Legacy version please use c2bbf18f instead)

Ionic View App Version
Ionic View Ionic View (blue icon) - df4a9783
Ionic View legacy Ionic View Legacy - c2bbf18f

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

Or even more entertaining, see how it works on Youtube:

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

See more of my works

Happy prototyping!

Changelog

Last updated: Jun 17 2017

r1-mrhieu-ionic-sidemenu-9fbe65416793

-First version

r2-mrhieu-ionic-sidemenu-acd9a7ad2d93

-Support manual url for menu item.

r3-ionicMarket-ionic-sidemenu-ac9b72b74536

-Compatible with Ionic CLI ~3.4.0

Feature

  • Come as a directive
  • Customizable color
  • Nice animated effect

Usage

Background color for the active menu item

# scss/custom.sass
$activeColor: #ef473a

Ui-router state for categories page

# category_tree.js
var CATEGORY_STATE = 'app.category';

Include directive in a template

<category-tree categories="categories" title="Categories"></category-tree>

Data structure

[
    {
        name: "Category 01",
        id: 4,
        items: [// Required: array, even empty
          {
            name: "Subcategory 01",
            id: 40,
            items: [...]// Required: array, even empty
            ...

Latest version - mrhieu-ionic-sidemenu-acd9a7ad2d93

After receiving quite a few requests, I've made this improvement (hope so :D). The plugin now supports manual url for menu item.

You can simply add a url property in the data object to override the url of the menu item.

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

Besides, I brought the category state config out as a directive attribute. In previous version, you need to go inside the plugin source code to modify

// Use ui-router's state to specify the active menu item
        var CATEGORY_STATE = 'app.category';

Now, just use the attribute categoryState

<category-tree categories="categories" title="Categories" category-state="app.category"></category-tree>

Screens

  1. Sidemenu

Run locally

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 plugin into your project, don't forget these dependencies

  1. CSS (sass) file /scss/custom.sass
  2. JS file: /www/js/category_tree.js
  3. Template: /www/templates/category_tree.html
  4. Inject module 'categoryTree' in your module declaration.

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.

tali walt

tali walt   ·   4 years ago

Hello Hieu, Very cool idea, and quite easy to customize. I can't leave a review here because I purchased from gumroad, but for anyone reading this I give it 5-stars. However, I would like to download the updated version (from Dec. 15th) but the download link on gumroad hasn't been updated. Can you fix this? Thanks again and great job :)

Hieu Pham

Hieu Pham   ·   4 years ago

Hey Tali, thank you so much. As for the versioning, you may get it wrong. This plugin has only one version: Last updated: Dec 12 2015 mrhieu-ionic-sidemenu-9fbe65416793

Martí

Martí   ·   3 years ago

Do you hope upgrade it to ionic 2? Thanks.

Hieu Pham

Hieu Pham   ·   3 years ago

I will soon bro

  ·   just now

{{ reply.comment }}



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

akshaytaywade

akshaytaywade   ·   3 years ago

Can you provide ionic 2 app for this i purchased but i want ionic 2 please help

akshaytaywade

akshaytaywade   ·   3 years ago

akshay.aksahy502@gmail.com this is my email id

Hieu Pham

Hieu Pham   ·   3 years ago

Sorry, I don't have any version for ionic 2. This is for Ionic 1 only as mentioned in the Details section.

akshaytaywade

akshaytaywade   ·   3 years ago

sir can you please help me for ionic 2 ... side menu with multilevel .....please help me...if i can refer any code ..... :( :( :( :( i really need help

Hieu Pham

Hieu Pham   ·   3 years ago

Stay tuned. I just started to look into Ionic 2

  ·   just now

{{ reply.comment }}



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

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

Hello Hieu I have just purchase your apps but it's look like only support ionic 1 . i though if you have updated it a month ago then surely it should support ionic 2 as well. Can you please looked into it.

Hieu Pham

Hieu Pham   ·   2 years ago

Hi, you've purchased the wrong one. Sidemenu-2 is a separated item located in https://market.ionic.io/plugins/multilevel-sidemenu-2. Supported version is mentioned clearly on the right side of this page. Thanks.

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

How can i get that item support ionic 2 because the item i purchase there no use to me.

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

it will be grate if you can refund that or i will send rest amount to buy this item.

Hieu Pham

Hieu Pham   ·   2 years ago

Can you drop me an email? I'm willing to receive the rest.

  ·   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.

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

Hello Hieu I have just purchase your apps but it's look like only support ionic 1 . i though if you have updated it a month ago then surely it should support ionic 2 as well. Can you please looked into it.

Hieu Pham

Hieu Pham   ·   2 years ago

Hi, you've purchased the wrong one. Sidemenu-2 is a separated item located in https://market.ionic.io/plugins/multilevel-sidemenu-2. Supported version is mentioned clearly on the right side of this page. Thanks.

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

How can i get that item support ionic 2 because the item i purchase there no use to me.

ionicfirebaseapp

ionicfirebaseapp   ·   2 years ago

it will be grate if you can refund that or i will send rest amount to buy this item.

Hieu Pham

Hieu Pham   ·   2 years ago

Can you drop me an email? I'm willing to receive the rest.

  ·   just now

{{ reply.comment }}



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

akshaytaywade

akshaytaywade   ·   3 years ago

Can you provide ionic 2 app for this i purchased but i want ionic 2 please help

akshaytaywade

akshaytaywade   ·   3 years ago

akshay.aksahy502@gmail.com this is my email id

Hieu Pham

Hieu Pham   ·   3 years ago

Sorry, I don't have any version for ionic 2. This is for Ionic 1 only as mentioned in the Details section.

akshaytaywade

akshaytaywade   ·   3 years ago

sir can you please help me for ionic 2 ... side menu with multilevel .....please help me...if i can refer any code ..... :( :( :( :( i really need help

Hieu Pham

Hieu Pham   ·   3 years ago

Stay tuned. I just started to look into Ionic 2

  ·   just now

{{ reply.comment }}



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

Martí

Martí   ·   3 years ago

Do you hope upgrade it to ionic 2? Thanks.

Hieu Pham

Hieu Pham   ·   3 years ago

I will soon bro

  ·   just now

{{ reply.comment }}



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

Hieu Pham

Hieu Pham   ·   4 years ago

Hey Tali, thank you so much. As for the versioning, you may get it wrong. This plugin has only one version: Last updated: Dec 12 2015 mrhieu-ionic-sidemenu-9fbe65416793

tali walt

tali walt   ·   4 years ago

Hello Hieu, Very cool idea, and quite easy to customize. I can't leave a review here because I purchased from gumroad, but for anyone reading this I give it 5-stars. However, I would like to download the updated version (from Dec. 15th) but the download link on gumroad hasn't been updated. Can you fix this? Thanks again and great job :)

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