An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
Check out the demo (you'll need a CSS 3D capable browser, such as Chrome.)
A current list of supported browsers can be found here.
Use it like any regular jQuery plugin:
$( '.list' ).makisu({
selector: 'li',
overlap: 0.2,
speed: 0.8
});
The options available are:
selector
Children matching this selector will be folded into the Makisuspeed
The animation duration (in seconds) for each folding itemoverlap
Fraction of speed
by which folding items overlap (0
to 1
)shading
Default shading colour (null
for no shading)perspective
Perspective to apply to 3D transformed objectsOnce an element has been extended as in the example above, you can open
, close
and toggle
it.
$( '.list' ).makisu( 'open' );
The name comes from the object that inspired it.