我一直在努力理解和调整这里发布的漂亮的“粘糊糊的菜单”......
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坐标的变化。
感谢您对可能导致这种不必要的跳跃的任何想法!
答案 0 :(得分:1)
在您的Codepen中,当显示子项时,它会导致正文页面高度发生变化并且溢出。
然后显示一个垂直滚动条,页面宽度也会改变。
默认情况下只需添加滚动条
body {
overflow-y: scroll;
}
如果您将 原始Codepen中的布局视图更改为垂直选项,则可以看到没有显示滚动条(至少在我的显示器上)。