Question

I’m trying to basically replicate the Starbucks mobile navigation but I can’t figure out how to get their smooth slide transition when you click the three lines. It looks like they’re using CSS3 transitions to achieve this animation but I can’t replicate it.

I’ve got the same result but without it animating because CSS3 does not animate display: inherit.

Here is my JSFiddle, can anyone improve it with a CSS3 cubic bezier transition like Starbucks.com is using on their mob navigation? (you’ll have to resize your window to see their mob nav obviously)

p.s. this needs to be CSS3, no jQuery animation please 🙂

http://jsfiddle.net/zQxNd/2/

Answer 1

Best approach I’ve encountered is to set the default style of the hidden menu to:

display:block;
overflow:hidden;
height:0;

then in your .open set the height of the element:

height: 200px;

I edited your fiddle to show: http://jsfiddle.net/zQxNd/3/

Also, it’s probably best to write a quick jQuery function to set the height of through jQuery — it’s not ideal, but it’s the best solution I’ve found with the tools we have.

EDIT: and for getting the exact speed of the animation, you can play with this awesome little app: http://cubic-bezier.com/

Once you get the timing down, you can replace your ease-in in the transition declaration with something like this:

transition: all 1s cubic-bezier(.17,.67,.83,.67)