jStackmenu

2010 Mar 22
  2. Blog

I decided to take my Pure CSS Stack Menus a step further. I took the same concept and created a jQuery UI widget for it. 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.

Try out a demo of the jStackmenu

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


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

Files

  1. jQuery 1.3.2
  2. jQuery UI 1.7.2
  3. Zachary Johnson’s jQuery CSS Transform
  4. Zachary Johnson’s jQuery Animate CSS Rotate Scale
  5. jStackmenu

Documentation

If you want to see any of the options, methods or events in action, use the test page for jStackmenu.

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 )

A function that is called before animating to hide.

$( '#stackmenu' ).jstackmenu( {
  'hideBefore':  function( event, menuElement ){
    // do something
  }
} );
$( '#stackmenu' ).bind( ' jstackmenuhideBefore', function( event, menuElement ){
    // do something
  } );
Link to User Icon Name Date Comment
#comment-192 {Avatar Icon} Alex C 4 months ago

Very cool! Thanks for sharing this :)

#comment-193 {Avatar Icon} Felix 4 months ago

Even if I don't want to use jQuery on my page (I would like to have as less JS as possible, the server should do whatever has to be done), this is a great inspiration for a thing to make in CSS3 (and a fallback for IE).

#comment-194 {Avatar Icon} Tssson 4 months ago

Nice work but how about the browser support? Always list browser support when writing about JQ plugins.

#comment-195 {Avatar Icon} dsad 3 months, 3 weeks ago

sad

#comment-196 {Avatar Icon} Foaly* 3 months, 3 weeks ago

I wonder how it can be a fallback for IE when it doesn't work. Firefox and Safari are very nice, Opera is okay even if it's not rotated and IE <= 8 is a bit ugly.

#comment-197 {Avatar Icon} Foaly* 3 months, 3 weeks ago

I'd like to see what parts of jQuery UI have necessarily to be loaded.