CSS 3D Dropdown Concept
Pull request Compare This branch is 3 commits behind soulwire:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css
js
README.md
index.html

README.md

Makisu

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.

Example usage

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 Makisu
  • speed The animation duration (in seconds) for each folding item
  • overlap 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 objects

API

Once an element has been extended as in the example above, you can open, close and toggle it.

$( '.list' ).makisu( 'open' );

Trivia

The name comes from the object that inspired it.