jquery - 奥巴马风格的弹出式菜单 - 保留文本宽度

Question

我正在尝试构建响应式导航菜单，就像 http://www.barackobama.com 上的导航菜单一样. (参见我的 JSFiddle http://jsfiddle.net/andfinally/VvWWh/。)在较小的屏幕宽度上，当用户单击“菜单”链接时，主页内容向右滑出视口(viewport)，显示下面的导航菜单。我通过将类 .show-nav 应用到此事件的 html 元素来执行此操作，这会重新定位 #main 中的内容。 #main 有一个 1 秒的过渡 CSS 规则，使移动更流畅。

到目前为止，当您打开导航时，这在 Chrome 中似乎工作正常。但是当您再次折叠它时，内容区域中的文本会自行重新排列。谁能解释一下奥巴马的人是如何设法阻止这种情况发生的？我希望内容像一个静态对象一样滑动。

Answer 1

这是因为您的内容 div 没有固定宽度。

如果您将 #main 的宽度固定为，比方说 90%，它将按您希望的那样工作。

即将此添加到您的 CSS:

#main {
    width: 90%;
}