I've been trying to understand and adapt the beautiful "gooey menu" posted here...
http://codepen.io/lbebber/pen/pvwZJp
My latest attempt to make a vertical/rectangular menu being here...
http://codepen.io/d3wannabe/pen/EVwEBE
But I have an issues that I'm really struggling to fix - when you use the dropdown menu in the second link (my one), after the initial animation on expanding, the whole menu jumps slightly to the left (whereas on collapse it jumps back to the right). If you look at the css (scss) I'm not applying any x-position transform/translates so I can't figure out what could be causing it.
The only piece of code I'm a little suspicious of because I don't fully understand it is...
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
But still it sounds purely related to the time intervals that any transitions apply to and not a shift in the x-coordinate.
Thanks for any thoughts at all on what might be causing this unwanted jump!
In your Codepen, when the sub items are displayed, it causes the body page height to change and it overflows.
Thus a vertical scrollbar is then shown and the page width changes.
Just add a scrollbar by default
body {
overflow-y: scroll;
}
If you change the layout view in your original Codepen to the vertical option you can see that no scrollbar appears (at least on my monitor).