This is a simple radial menu with sub menus arranged around the main menu. Here is the interesting part of the positioning and animation:
if( show )
{
_menu.addClass( 'sub-menu-open' );
var angle = 45 * 180 / Math.PI;
var step = 2 * Math.PI / _subs.length;
var cx = _menu.width() * 0.5;
var cy = _menu.height() * 0.5;
_subs.each( function( index )
{
var sub = $( this );
var width = sub.width();
var height = sub.height();
var dw = cx - width * 0.5;
var dh = cy - height * 0.5;
var x = Math.round( _opt.radius * Math.cos( angle ) + width - dw * 0.5 );
var y = Math.round( _opt.radius * Math.sin( angle ) + height - dh * 0.5 );
var delay = index * ( _opt.showTime / _subs.length );
sub.show();
sub.delay( delay ).animate( { left: x, top: y }, { duration: _opt.showTime, easing: _opt.showEasing } );
angle += step;
} );
}
else
{
_subs.each( function( index )
{
var sub = $( this );
var x = center.x - sub.width() * 0.5;
var y = center.y - sub.height() * 0.5;
var delay = index * ( _opt.showTime / _subs.length );
sub.stop().delay( delay ).animate( { left: x, top: y }, { duration: _opt.hideTime, easing: _opt.hideEasing }
);
} );
_menu.removeClass( 'sub-menu-open' );