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
CSS. For having an
ul, and child
li with this same name (
.topmenu ), kind of defeats all logic.