css - 关闭 Canvas 菜单在内容很少的页面上被截断

Question

我正在尝试实现 Canvas 外菜单。我在 Smashing 杂志上找到了这个例子，并实现了菜单——除了只有少量内容的页面外，它工作得很好；滑出菜单中的元素只显示在内容所在的最下方。

如果您的内容很少而菜单项很多，则 Smashing Magazine 上的事件示例将无法正常工作。我已经在 Smashing Magazine 的帖子上发表了评论，但没有收到回复。

Here's my jsfiddle

如果你点击红框，就会出现菜单；它不会顺利滑出，因为我没有包含 javascript(我认为我的问题是内包装和外包装中的 css)。菜单应该有 11 项，但您只能看到 8 项。

#outer-wrap {
position: relative;
overflow: hidden;
width: 100%;
}

#inner-wrap {
position: relative;
width: 100%;
}

我真的不想以其他方式重建菜单。非常感谢任何帮助!!谢谢....

Answer 1

您的菜单位于带有 overflow:hidden 的外包装 div 内。这意味着外包装外的任何元素都将被“隐藏”。只需删除溢出，它应该可以正常工作(或将其设置为“可见”)