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

标签 css navigation responsive-design

我正在尝试实现 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%;
}

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

最佳答案

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

关于css - 关闭 Canvas 菜单在内容很少的页面上被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22563402/

相关文章:

html - 图片高度15%,当屏幕尺寸小于图片宽度wide时,scale height?

javascript - AmCharts - 折线图溢出图形容器

javascript - 将 angular 6 应用程序集成到其他应用程序时如何避免 css 冲突?

javascript onmouseout 清除html元素

authentication - Flutter:应用生命周期之间的导航问题

iOS 用户界面 : Need guidance to design such a flow of screens - which controllers should be best?

html - 两列自动高度背景颜色

iPhone 5 CSS 媒体查询

javascript - jQuery - 图像 slider 不工作

javascript - 动态填充父容器高度的一半