我正在尝试构建一个响应式导航菜单，例如http://www.barackobama.com上的导航菜单。（参见我的 JSFiddle http://jsfiddle.net/andfinally/VvWWh /。）在较小的屏幕宽度上，当用户单击“菜单”链接时，主页面内容向右滑出视口，显示下面的导航菜单。我通过将类 .show-nav 应用到此事件的 html 元素来做到这一点，这会重新定位 #main 中的内容。#main 有一个 1 秒的过渡 CSS 规则，使移动更流畅。
到目前为止，当您打开导航时，这在 Chrome 中似乎工作正常。但是当您再次折叠它时，内容区域中的文本会自行重新排列。任何人都可以解释奥巴马是如何设法阻止这种情况发生的吗？我希望内容像一个静态对象一样滑落和滑落。