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.
Jason Hutchinson (zikes@zikes.me)
Download and include the JS file in your page.
Create a list, with the first list item representing the icon at the center of the menu.
<ul>
<li><a href="#">+</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
The Javascript:
$('ul').circleMenu({
item_diameter: 40,
circle_radius: 100,
direction: 'bottom-right'
});
Default: {start: 0, end: 90}
An object specifying the position of the items in relation to the center, measured in
degrees where 0/360 are on the right and angle travels in a clockwise direction. An
alternative to the direction option, if you want more control.
Example:
$('ul').circleMenu({angle:{start:260, end:280}});
Default: 80
The radius of the circle that determines the distance of the items from the center.
Example:
$('ul').circleMenu({circle_radius:80});
Default: 1000
When the menu is triggered on hover, the delay is the amount of time before the items will move back in to the center, meaured in milliseconds.
Example:
$('ul').circleMenu({delay:500}); // a short delay
Options: top | right | bottom
| left | top-right | top-left |
bottom-right | bottom-left | top-half |
right-half | bottom-half | left-half |
full
Default: none
The direction of the items in relation to the center. top will place
the items above the center, in a 90 degree semicircle centered upwards.
top-half will create a full 180 degree semicircle. full will
create a full 360 degree circle, with the first item appearing at the top.
Example:
$('ul').circleMenu({direction:'bottom-right'});
Default: 30
The diameter of each item, in pixels. Used to set the CSS properties of each item including width, height, and border-radius.
Example:
$('ul').circleMenu({item_diameter:30});
Default: 500
The animation speed, in milliseconds. The number given is the total amount of time it will take for the items to move in or out from the center.
Example:
$('ul').circleMenu({speed:1000});
Default: -20
The number of milliseconds between each item moving in to the center when the menu closes. A negative value will cause the menu to close in reverse, starting with the last item.
Example:
$('ul').circleMenu({step_in:60});
Default: 20
The number of milliseconds between each item moving out from the center when the menu opens. A negative value will cause the menu to open in reverse, starting with the last item.
Example:
$('ul').circleMenu({step_out:60});
Options: ease | linear |
ease-in | ease-out | ease-in-out |
cubic-bezier(n,n,n,n)
Default: ease
The CSS timing function used to control the open/close animation.
Example:
$('ul').circleMenu({'transition_function':'linear'});
Options: hover | click |
none
Default: hover
How the menu is triggered to open and close, whether by hovering over the center item or clicking on it.
Example:
$('ul').circleMenu({trigger:'click'});
The following are events triggered by the menu.
Trigged when the menu closes.
Examples:
$('ul').circleMenu({close:function(){}});
$('ul').on('circleMenu-close',function(){});
Triggered when the menu is initialized.
Examples:
$('ul').circleMenu({init:function(){}});
$('ul').on('circleMenu-init',function(){});
Triggered when the menu opens.
Examples:
$('ul').circleMenu({open:function(){}});
$('ul').on('circleMenu-open',function(){});
Triggered when an item is selected. Passes the jQuery-wrapped item element as the second argument to the function provided, after the jQuery event object.
Examples:
$('ul').circleMenu({select:function(evt,item){}});
$('ul').on('circleMenu-select',function(evt,item){});
The following commands may be used to manipulate the menu once it has been initialized.
Closes the menu
Example:
$('ul').circleMenu('close');
Re-intializes the menu. Handy for use after a new item has been added.
Example:
$('ul').append($('<li><a href="#">New</a></li>')).circleMenu('init');
Opens the menu
Example:
$('ul').circleMenu('open');
Classes are applied and removed as appropriate to represent the current state of the menu.
The menu is currently closed.
Example:
ul.circleMenu-closed {background-color: red;}
The menu is currently open.
Example:
ul.circleMenu-open {background-color: green;}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION