Radial Menu

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' );