zikes / circle-menu

A circular menu jQuery plugin, inspired by the Path application for Android and iOS

Circle Menu

A customizable jQuery plugin that emulates the menu in the Path application. Includes a selection animation and various animation options for opening and closing the menu.

See it in action.

Read the Documentation.

Compatibility:

Fully Working:

• Chrome
• Firefox
• Android
• Opera

Known Issues:

• IE 9
  • Does not include CSS animations for open/close, as it does not support CSS transitions.

circle-menu's Issues

Submenus not working in Android

Selecting a submenu causes the parent menu to close when using the hover trigger.

When recalling to .init(), code register events again

I fixed it in my implementation:

use:
$item.off('click');

before:
$item.on('click', function () {
self.select(index + 2);
});

Thanks for this great example !!!

Align

I have am trying to align horizontal the items but it seams that the calculations forces to the items not be align.

Any simple change to make this happen?

how to reset the direction of menu to another type?

how to reset the direction of menu to another type?
at the beginning:
$("#circleR").circleMenu({
circle_radius : 85,
item_diameter : 40,
direction : 'left-half',
trigger : 'click',
open : function() {
console.log('menu opened');
},
close : function() {
console.log('menu closed');
},
init : function() {
console.log('menu initialized');
},
select : function(evt, index) {
console.log(evt, index);
}
}).on('circleMenu-open', function() {
console.log('menu opened 2');
});

after this, in some event I would like to change the direction to 'bottom-right' like this but it fail to change it:

$("#circleR").circleMenu({
circle_radius : 85,
item_diameter : 40,
direction : 'bottom-right',
trigger : 'click',
open : function() {
console.log('menu opened');
},
close : function() {
console.log('menu closed');
},
init : function() {
console.log('menu initialized');
},
select : function(evt, index) {
console.log(evt, index);
}
}).on('circleMenu-open', function() {
console.log('menu opened 2');
});

issue when just two item it does not works

i used below html

<ul>
  <li><a href="#">+</a></li>
  <li><a href="#">5</a></li>
</ul>

but it shows only one cirlce

Overlapping issue

Hi!

I've got an issue with a component who has a z-index which is higher that the item menu. Can you make the z-index configurable so that we can choose it with an option? And i think it would be better to put a z-index equal to the value of the first item z-index -1 like below.

li:first-child{
z-index: 1000; //configurable
}
li{
z-index: 999; // first-child z-index - 1
}

http://codepen.io/KiGniark/pen/jPdoaE (the problem is there)

Thanks for this plugin, it's awesome!

Menu items appears quickly after hiding and black browser area in Chrome on OSX

After the items are hidden when the menu is closing, the menu items appears quickly before they are completely invisible as shown in the following screen recording.

Another thing which I am uncertain if it should be reported as a separate bug is that the browser area "flashes" and becomes black for a moment when an animation begins or ends.

I collected these bugs in a screen recording, I hope this gives a better idea on how to reproduce them.
Screen recording contains annotations on what is happening.

http://www.youtube.com/watch?v=N5Ow_bvcAzM

Open Animations Not Working in Opera

Turns out that Opera does not apply the CSS transition animation to visibility quite like other browsers do. Whereas other browsers would make it instantly visible at the start of the transition and then perform the animation Opera instead animates and then makes visible.

keep open by default instead of hovering

keep open by default instead of hovering