CSS 3D Dropdown Concept

  • By Justin Windle
  • Last update: Nov 2, 2022
  • Comments: 9

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.

Github

https://github.com/soulwire/Makisu
<'/li> <'li> <'a href="#page2">Page2 <'div class="caption">

capition Page2

<'li> <'a href="#page3">Page3 <'div class="caption">

capition Page3

<'/li> <'/ul> in css #menu li>a have height and width of all parent li

Is perfect with Chrome but I don't understand why with Firefox i found this problem. If i set z-index of <'li'> and of <'a'> can i resolve my problem?

thx for your attention. Best Regards, Alberto

  • 2

    Mobile safari support

    Demo doesn't seem to run on mobile Safari (5.1), but can't see a reason why not as CSS transforms etc all supported in the browser. Not had time to test on other versions. Looks lovely in Chrome tho ;)

  • 3

    Linking (SOLVED)

    If I add links to Nigiri as follows, only link One shows in Firefox. For link Two, Three, etc., the text shows but does not show the hyperlink and is not clickable... ? Do you know the solution?


    Okay here is the complete solution to make this work with links in all 3 browsers. I only used the Nigiri section... the leftmost list animation... so apply to other sections if you use all three drop-downs:

    On style.css line 244 (your line number may vary) change:

    .nigiri dt, .nigiri dd, .nigiri a {
    background: #789962;
    }

    to

    .nigiri dt, .nigiri dd, .nigiri a {
    background: #789962;
    position: relative;
    z-index:999;
    }

     

    Then on Makisu.js on lines 346 & 350 change:

    'transform': 'translateZ(-0.1px)'

    to

    'transform': 'translateZ(-1px)'

    :)

  • 4

    Unfocused tab causes rapid wrap/unwrap

    If you click the toggle button and go to a different tab (must be same browser window), then switch back a few seconds later, the dropdown will have a 'whip' effect. Not sure if intentional, but it looks kind of janky.

  • 5

    Safari 5.1.7 on Windows XP

    The detection script doesn't seem to be spotting Safari 5.1.7 (Build 7534.57.2) on Windows XP even though it supports 3D transformations. Also, if you go into the inspector and remove the warning it still won't let you run it.

  • 6

    Wiki Issue

    I had to check it out in IE and noticed that the link to get a "sexier browser" needs an "http://" at the front. I wish for people to click this, and I know that people who need to click it will need it to work right! ;)

  • 7

    Implement API Callback functions

    It would be an improvement if every API call could also have a callback function as an option.

    Currently some like this is not possble:

    		$(".list").makisu('close', function () {
    		    //Some function
    		});
    
  • 8

    Item links are not functioning in Firefox

    Hi! I've noticed that in FF v29, the item links are not functioning (no hover, they are not clickable). This can be observed on the demo page as well. Can it easily be solved somehow? Thanks in advance! Very cool plugin though.

  • 9

    Opera 12 / Win 8

    I'm trying this in Opera and the menu just appears... no folding. I noticed though that it passes the $.fn.makisu.enabled, which is indeed true. Is there a small tweak for Opera or should I wrap it in a browser check condition and use my own basic menu for Opera?

    Thanks.