CSS 3D Dropdown Concept

Related tags

Effect Makisu
Overview

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.

Comments
  • <a> element insert in makisu selector

    element insert in makisu selector

    Hi, i tryed to create a little navigatin menu with this lib, the animation is ok on all browser type but on firefox i found a problem: the internal link in <'li'> is not find from mouse in firefox. My set: $('#menu').makisu({ selector: 'li', overlap: 0.2, speed: 0.2 });

    <'ul id="menu"'> <'li> <'a href="#page1">Page1 <'div class="caption">

    capition Page1

    <'/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

opened by amontanari 13
  • Mobile safari support

    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 ;)

    opened by itsravenous 4
  • Linking (SOLVED)

    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)'

    :)

    opened by Eliyahna 1
  • Unfocused tab causes rapid wrap/unwrap

    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.

    opened by Twoje 1
  • Safari 5.1.7 on Windows XP

    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.

    opened by DavidBradbury 0
  • Wiki Issue

    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! ;)

    opened by dfritsch 0
  • Implement API Callback functions

    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
    		});
    
    opened by deadmanIsARabbit 0
  • Item links are not functioning in Firefox

    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.

    opened by icetronics 2
  • Opera 12 / Win 8

    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.

    opened by KDCinfo 2
  • Owner
    Justin Windle
    Justin Windle
    .qube -- The Quintessential Responsive 3D CSS Cube

    .qube Quintessential Responsive 3D CSS Cube Created by @zacharyjohnson — zachstronaut.com Hello web friend! The styles defined in "src/qube.css" provi

    Zachary Johnson 63 Dec 17, 2022
    :package: Introduction to CSS 3D transforms

    Intro to CSS 3D transforms By David DeSandro 3dtransforms.desandro.com Tutorial, examples, and discussion all about CSS 3D transforms. Originally writ

    David DeSandro 998 Jan 2, 2023
    3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

    cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

    Tunghsiao Liu 54 Nov 14, 2022
    Pure CSS animated 3D Super Mario Icon

    Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

    Andreas Jacob 14 Apr 15, 2021
    CSS 3D renderer for Three.js.

    CSS3D.js by Steven Wittens CSS 3D renderer for Three.js Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is i

    null 365 Aug 27, 2022
    An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms

    CSS Space Shooter Play The Game This is an experiment I made to investigate the capabilities of CSS 3D transforms. Having played about with this techn

    Michael Bromley 162 Oct 2, 2022
    sync CSS 3D transformations to a WebGL scene

    gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as

    null 30 Oct 17, 2022
    Pure CSS Image Hover Effect Library

    imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

    Ciaran Walsh 1.8k Dec 21, 2022
    A slideshow that uses a CSS glitch effect for slide transitions.

    Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag

    Codrops 111 Dec 16, 2022
    Some ideas for modern multi-layer page transitions using CSS Animations.

    Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore

    Codrops 117 Nov 1, 2022
    Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

    Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol

    Mladen Plavsic 334 Dec 11, 2022
    CSS loading animations with minimal effort!

    Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

    Jhey Tompkins 1.4k Jan 4, 2023
    🔮 CSS loading animations made by single element.

    Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

    Zongbin 1.2k Dec 29, 2022
    Pure css cross-browser loading animations.

    [ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

    Anas Tawfik 21 Nov 15, 2021
    Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

    Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

    GibboK 477 Nov 12, 2022
    True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

    TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

    Bo 6 Mar 29, 2022
    Avgrund is jQuery plugin with new modal concept for popups

    Avgrund Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page. It works in all modern b

    Dmitri Voronianski 1.8k Dec 14, 2022
    Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

    This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

    Christopher Blum 6.5k Jan 7, 2023
    Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

    This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

    Christopher Blum 6.5k Dec 30, 2022
    💌 mailgo, a new concept of mailto and tel links

    ?? mailgo a new concept of mailto and tel links https://mailgo.dev Transform all your mailto and tel link in a beautiful modal with more possibilities

    Matteo Manzinello 1k Dec 31, 2022