奥巴马风格的飞出菜单 - 保留文字宽度

Question

我正在尝试构建一个响应式导航菜单，例如http://www.barackobama.com上的导航菜单。 （请参阅我的JSFiddle http://jsfiddle.net/andfinally/VvWWh /。）在较小的屏幕宽度上，当用户单击“菜单”链接时，主页面内容向右滑出视口，显示下面的导航菜单。我这样做是通过将类.show-nav应用于此事件的html元素，该元素重新定位#main中的内容。 #main有1秒的转换CSS规则，使运动更平滑。

当您打开导航栏时，这似乎在Chrome中工作正常。但是当你再次折叠它时，内容区域中的文本会重新排列。谁能解释奥巴马家伙是如何设法防止这种情况发生的呢？我想让内容像一个静态对象一样滑落。

Answer 1

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

如果您将#main的宽度修改为90％，那么它将按照您的意愿运行。

即。将此添加到您的CSS：

#main {
    width: 90%;
}