Адаптация меню Gooey CSS/SVG

Question

Я пытался понять и адаптировать красивое «липкое меню» размещены здесь ...

http://codepen.io/lbebber/pen/pvwZJp

Моей последней попытку сделать вертикальное/прямоугольное меню является здесь ...

http://codepen.io/d3wannabe/pen/EVwEBE

Но у меня есть вопросы, которые я действительно изо всех сил, чтобы исправить - если вы используете выпадающее меню во второй ссылке (мой один), после начальной анимации на расширяется, все меню перескакивает y влево (тогда как при крахе он возвращается вправо). Если вы посмотрите на css (scss), я не применяю x-position transform/translates, поэтому я не могу понять, что может быть причиной этого.

Единственный кусок кода я немного подозрительно, потому что я не совсем понимаю, что это ...

.menu-open:checked~.menu-item{ 
    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000); 

Но все это звучит чисто, связанные с временными интервалами, что любые переходы применяются к а не сдвигом в координате x.

Спасибо за любые мысли о том, что может вызвать этот нежелательный прыжок!

Answer 1

В вашем кодепене, когда отображаются подпункты, это приводит к изменению высоты страницы тела и ее переполнению.

Таким образом, отображается вертикальная полоса прокрутки и изменяется ширина страницы.

Просто добавьте скроллбар по умолчанию

body { 
    overflow-y: scroll; 
} 

Codepen Demo

При изменении макета в вашей оригинальной Codepen к вертикальной опции вы можете увидеть, что не появляется полоса прокрутки (по крайней мере, на мой монитор).