Ionic Circular Menu

Ionic Circular Menu

Sass based Animated and Fully dynamic circular Menu

$0.00

ost.agency

ost.agency

Member since 2015

Details

Version:
1.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
5 years ago
Category:
Plugins
Tags:
,

ionic-circular-menu

Sass based Animated and Fully dynamic circular Menu.

Features

  • Multiple Submenus
  • Mange the click events of submenus
  • Dynamic ionic icons and/or images

Usage

Get the files from github or install from bower:

``` bower install ionic-circular-menu

```

Include circular-menu.js in your index.html:

```

```

Include menu.scss and ionic-icon.scss in your ionic.app.scss:

@import "www/lib/ionic-circular-menu/src/scss/menu"

@import "www/lib/ionic-circular-menu/src/scss/ionic-icon"

Add the module ionic-circular-menu to your application dependencies in your app.js:

angular.module('starter', ['ionic', 'starter.controllers','ionic-circular-menu'])

And you're ready to go.

Directives

circular-menu

This directive will transform the element into a circucar menu . By clicking the main humbargar icon sub items of circular menu will be opened . You can also handle the click of sub items. For this to work the following conditions must apply:

  • The element you use this directive must be clickable.
  • The directive requires an inner attribute "menuHander" to be set on the element to manage the submenus click events.
  • The directive expects an inner attribute "config" to define the basic configuration .
  • If image will be present icon tag does not show ,otherwise icon will be load by default .

Add the below directive to your template file.

```

```

Config

  • status: Menu open or close status [true/false]
  • submenus: Submenu objects separated by comma for sub items . e.gsubmenus:[ {menuicon:'icon ion-social-twitter',img:'img/twitter.png'}, {menuicon:'icon ion-social-facebook',img:'img/facebook.png'}]

Example of config and event override of menu and submenu in controller.

In img to assign image file path otherwise ionic icon load by default

$scope.circularMenuConfig ={ status:true, submenus:[ {menuicon:'icon ion-social-twitter',img:''},

{menuicon:'icon ion-social-facebook',img:''},

{menuicon:'icon ion-social-googleplus',img:''},

{menuicon:'icon ion-social-github',img:''}, {menuicon:'icon ion-social-whatsapp-outline',img:''}, {menuicon:'icon ion-social-buffer-outline',img:''}, {menuicon:'icon ion-social-windows',img:''}, {menuicon:'icon ion-social-html5',img:''}

]

} $scope.menuHander = function(subMenuindex){ switch(subMenuindex){ case 1: console.log('twitter'); break; case 2: console.log('facebook');break;

case 2: console.log('googleplus');break; case 4: console.log('github');break; case 5: console.log('whatsapp');break; case 6: console.log('buffer');break; case 7: console.log('window');break; case 8: console.log('html');break; default : break; } }

```

}

Questions?

If you have any query then please contact [email protected] or report it on the Github.

Open Source Technologies

```