Submit your widget

Nice Stack Menu With jQuery

Created 13 years ago   Views 27168   downloads 4770    Author moronicbajebus
Nice Stack Menu With jQuery
View DemoDownload
196
Share |

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
clockwise
Boolean Default: true, clockwise
direction
String Default: 'top'
time
Integer Default: 500

Methods

toggle
.jstackmenu( 'toggle', [switch], [callback] )
show
.jstackmenu( 'show', [callback] )
hide
.jstackmenu( 'hide', [callback] )
enable
.jstackmenu( 'enable' )
disable
.jstackmenu( 'disable' )
destroy
.jstackmenu( 'destroy' )
option
.jstackmenu( 'option', optionName, [value] )

Events

show
function( event, menuElement )
hide
function( event, menuElement )
showBefore
function( event, menuElement )
hideBefore
function( event, menuElement )