调整Gooey CSS / SVG菜单

时间:2015-10-15 10:32:59

标签: css svg sass svg-filters

我一直在努力理解和调整这里发布的漂亮的“粘糊糊的菜单”......

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

我最近尝试将垂直/矩形菜单放在这里...

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

但我有一个问题,我真的很难解决 - 当你在第二个链接(我的一个)中使用下拉菜单时,在扩展初始动画后,整个菜单略微向左跳(而在崩溃它跳回到右边)。如果你看一下css(scss)我没有应用任何x位置变换/翻译,所以我无法弄清楚可能导致它的原因。

我唯一有点怀疑的代码是因为我不完全理解它是......

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

但它仍然听起来纯粹与任何过渡适用的时间间隔相关,而不是x坐标的变化。

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

1 个答案:

答案 0 :(得分:1)

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

然后显示一个垂直滚动条,页面宽度也会改变。

默认情况下只需添加滚动条

body {
  overflow-y: scroll;
}

Codepen Demo

如果您将 原始Codepen中的布局视图更改为垂直选项,则可以看到没有显示滚动条(至少在我的显示器上)。