transition on a menu

[rrs1964]

I found this menu (which works perfect on ipads etc.) on the internet and adjusted it to separate floating buttons. Now I would like to set a transition so my menu folds out slower.

You can see an example here: http://www.rs-design.nl/ontwerp/index.html

And on CodePen here: http://codepen.io/rrs1964/pen/crCGF

I tried it with the following on every hover line in the css but no luck:

-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;

Any help would be appreciated!

Thanks!

[Paulie_D]

Please don’t just do a code dump.

Make a working example in Codepen.

[rrs1964]

Sorry Paulie_D, didn’t know that was not done….

[Atelierbram]

You want the menu to fold out slower, then maybe look into accordions, but most of them are done with some added javascript, but there are some pretty lightweight ones out there.

I know My first fork of your Codepen won’t help that much, for what I did here is change the display declaration to a opacity on hover.

In this second attempt I tried some transform: translateY(), with some overflow issues.

[rrs1964]

Thanks for your input, atelierbram!
To be honest I like your first attempt better. And it certainly looks better then my first attempt.
I remember seeing on the internet effects in css where objects appear in a rhythm: tak, tak, tak and that’s the effect I would like to have.

Guess you are Dutch too considering your name … ;-)

Rutger

[Atelierbram]

To be honest I like your first attempt better. And it certainly looks better then my first attempt.

First one is kind of easy to do really, trouble with the second transform: translate(Y) one, is the overlapping of the nested menu; can’t seem to have it come from under the menu-button. Tried z-index:-1, pseudo-element, nothing seems to work, so I give up for now.

I remember seeing on the internet effects in css where objects appear in a rhythm: tak, tak, tak and that’s the effect I would like to have.

Updated the Codepen’s with some slightly improved CSS , and added a tiny bit of delay on the transitions.

One thing I would like to recommend, – trying not to preach -, ( which is always tricky because, yes, I am Dutch after all), is trying to get your head around bem-syntax , or a similar logic with HTML and CSS. For having an ul, and child li with this same name ( .topmenu ), kind of defeats all logic.

[Atelierbram]

Tried z-index:-1, pseudo-element, nothing seems to work, so I give up for now.

Did eventually work: z-index has to be in scope.

[Author]

Posts