关闭画布菜单在具有非常少的内容的页面上被切断 [英] off canvas menu gets cut off on pages that have very little content

问题描述

我试图实现一个画布菜单。我发现了关于Smashing杂志的例子，并实施了菜单---它工作伟大，除了只有少量内容的页面;

I am trying to implement an off canvas menu. I found the example on Smashing magazine and had implemented the menu---it works great except for pages that only have a small amount of content; the items in the slide out menu only appear as far down as the content goes.

Smashing杂志上的示例无法正常工作，如果您有少量的内容和很多菜单项。我已在Smashing杂志帖子上发表了评论，但尚未收到回复。

Event the example on Smashing Magazine doesn't work properly if you have a short amount of content and a lot of menu items. I have posted a comment over on the Smashing Magazine post but haven't heard back.

这里是我的jsfiddle

如果你点击红色框，菜单会出现;它不滑出顺利，因为我没有包括javascript（我认为我的问题是与内部和外包装的CSS）。菜单应该有11个项目，但只能看到8个。

If you click on the red box, the menu will appear; It doesn't slide out smoothly because I didn't include the javascript (I think my problem is with the css in inner and outer-wrap). The menu should have 11 items but you only see down to 8.

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

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

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

I really don't want to rebuild the menu some other way. Any assistance is greatly appreciated!! Thank you....

推荐答案

你的菜单在outer-wrap div里面有overflow：hidden。这意味着任何进入外包裹的元素将被隐藏。只是删除溢出，它应该工作正常（或把它可见）

your menu is inside the outer-wrap div with overflow:hidden. that means any element going outside the outerwrap will be "hidden". Just remove the overflow and it should work fine (or put it "visible")

这篇关于关闭画布菜单在具有非常少的内容的页面上被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！