使用可滚动菜单固定主要内容的位置

Question

我有以下页面（基于david bushell off canvas响应菜单）：

http://kwedsd.byethost7.com/test.html

它显示了一个响应式菜单（不能完全正常工作），当您缩小浏览器的宽度时，将显示三个水平线图标。当您单击它时，菜单会滑入，这就是我遇到问题的地方，因为所有链接都不可见。

首先，我希望菜单项一直列在页面下方，而不是主要内容的高度。其次我想冻结主要内容，只是让菜单可滚动（如果你参考http://disney.com/?intoverride=true这是一个例子，当我点击菜单时我想要实现的主要内容冻结，但菜单仍然是滚动）。

我已经尝试将位置固定为主要内容，但不起作用。任何帮助都将不胜感激。

提前致谢。

Answer 1

您需要将#nav上的“溢出”值更改为“滚动”。所以你的CSS会读到：

#nav { 
  position: absolute;
  top: 0;
  padding-top: 5.25em;
  overflow: scroll;
  etc......
}

通过溢出：滚动，您至少可以让用户滚动菜单列表。

Answer 2

你将不得不对你的css进行很多改动，太多而无法在这里有效地列出，而且足以让我自己完全测试这一点并不容易。

这里的主要目标是使列表具有实际高度，绝对位置元素在布局中被忽略。

删除translate3d和#nav元素上的#main属性，然后向左移动#nav。然后，您必须使用溢出，宽度以及#main元素上的许多其他属性，以使其以您希望的方式显示。

其中一些将需要新的规则，例如#nav { width: 0; } html.js-nav #nav { width: 70%; }，以便您可以在显示菜单时进行转换。

这是一个起点，它应该让你处于比现在更好的位置，如果你再陷入困境，请回来寻求更多帮助。