Ionic Circular Menu

Description

Ionic Circular Menu is a 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:

<script src=”lib/ionic-circular-menu/src/js/circular-menu.js” ></script>

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:

This directive will transform the element into a circular 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:
<circle menuFunHandler=”menuHander(data);” config=”circularMenuConfig”></circle>

Config:

– Status: Menu open or close status [true/false]
– Submenus: Submenu objects separated by comma for sub items.

Example:
submenus:[ {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, 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;
}
}

}

In case of any query please contact us for Support of this Extension.