调整一个粘糊糊的 CSS/SVG 菜单答案

【问题标题】：Adapting a Gooey CSS/SVG menu调整一个粘糊糊的 CSS/SVG 菜单
【发布时间】：2016-01-13 18:32:31
【问题描述】：

我一直在努力理解和改编这里发布的漂亮的“粘性菜单”......

我在这里制作垂直/矩形菜单的最新尝试...

但是我有一个问题我真的很难解决 - 当您使用第二个链接（我的链接）中的下拉菜单时，在展开初始动画之后，整个菜单会稍微向左跳跃（而在折叠它会跳回右侧）。如果您查看 css (scss)，我没有应用任何 x 位置变换/翻译，所以我无法弄清楚可能导致它的原因。

唯一让我有点怀疑的代码是……

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

但这听起来仍然纯粹与任何转换适用的时间间隔有关，而不是 x 坐标的移动。

感谢您对可能导致这种不必要的跳跃的任何想法！

【问题讨论】：

【解决方案1】：

在您的 Codepen 中，当显示子项时，会导致正文页面高度发生变化并溢出。

然后显示一个垂直滚动条并且页面宽度发生变化。

默认添加滚动条

body {
  overflow-y: scroll;
}

如果您将您的原始 Codepen 中的布局视图更改为垂直选项，您会看到没有出现滚动条（至少在我的显示器上）。

【讨论】：