This is a Stack Menu with jQuery UI widget. Now you can take any element and turn its children into the items of a stack menu. You can control when it opens and closes, the direction it opens, the size of the arc and even the time it takes to open. It even has events for those who really want to get clever.

Of course there is a catch, it only does the arcing in the browsers that support CSS transforms. But, it does degrade into a popup of the stack items in a line. As well, for those browsers that support CSS transitions, it uses this instead of the Javascript animation which creates a smoother animation while reducing the Javascript load.

It is pretty simple to use. Just take any element, through jQuery, where the stack items are the children, and call .jstackmenu() on it.

Highlight Code

 $('ul.my-stack').jstackmenu();
 $('span.toggle-stack').click( function(){
  $('ul.my-stack').jstackmenu('toggle');
 });

Plain Text

$('ul.my-stack').jstackmenu();
$('span.toggle-stack').click( function(){
 $('ul.my-stack').jstackmenu('toggle');
});

Options

radius

Integer Default: 1000

The radius of the circle the menu arcs along. It has to be a positive number.

clockwise

Boolean Default: true, clockwise

The rotation of the arc the menu follows. True for clockwise and then false for counter-clockwise.

direction

String Default: 'top'

The direction the stack menu extend out of the container.

time

Integer Default: 500

The time in milliseconds of the animation.

Methods

toggle

.jstackmenu( 'toggle', [switch], [callback] )

Toggles the menu visibility.

• switch: A boolean value to determine if to show or hide the menu.
• callback: A function to get called after finishing toggled.

  $('#stackmenu').jstackmenu( 'toggle', function( event, menuElement ){
    // Do something after toggle
  });

show

.jstackmenu( 'show', [callback] )

Shows the menu.

• callback: A function to get called after finishing to show the menu.

  $('#stackmenu').jstackmenu( 'show', function( event, menuElement ){
    // Do something after showing
  });

hide

.jstackmenu( 'hide', [callback] )

Hides the menu.

• callback: A function to get called after finishing to hide the menu.

  $('#stackmenu').jstackmenu( 'show', function( event, menuElement ){
    // Do something after hiding
  });

enable

.jstackmenu( 'enable' )

Enable the jStackmenu.

disable

.jstackmenu( 'disable' )

Disable the jStackmenu.

destroy

.jstackmenu( 'destroy' )

Remove the jStackmenu functionality completely. This will return the element back to its pre-init state.

option

.jstackmenu( 'option', optionName, [value] )

Get or set any jStackmenu option. If no value is specified, will act as a getter.

Events

show

function( event, menuElement )

A function that is called after animating to show.

$( '#stackmenu' ).jstackmenu( {
  'show':  function( event, menuElement ){
    // do something
  }
} );

$( '#stackmenu' ).bind( ' jstackmenushow', function( event, menuElement ){
    // do something
  } );

hide

function( event, menuElement )

A function that is called after animating to hide.

$( '#stackmenu' ).jstackmenu( {
  'hide':  function( event, menuElement ){
    // do something
  }
} );

$( '#stackmenu' ).bind( ' jstackmenuhide', function( event, menuElement ){
    // do something
  } );

showBefore

function( event, menuElement )

A function that is called before animating to show.

$( '#stackmenu' ).jstackmenu( {
  'showBefore':  function( event, menuElement ){
    // do something
  }
} );

$( '#stackmenu' ).bind( ' jstackmenushowBefore', function( event, menuElement ){
    // do something
  } );

hideBefore

function( event, menuElement )