http://www.barackobama.comにあるような応答性の高いナビゲーション メニューを作成しようとしています。(私の JSFiddle http://jsfiddle.net/andfinally/VvWWh / を参照してください。) 画面幅が小さい場合、ユーザーが「メニュー」リンクをクリックすると、メイン ページのコンテンツが右にスライドしてビューポートから出て、下のナビメニュー。これを行うには、クラス .show-nav をこのイベントの html 要素に適用します。これにより、#main のコンテンツが再配置されます。#main には、動きをよりスムーズにするための 1 秒トランジション CSS ルールがあります。
ナビゲーションを開くと、Chrome でこれまでのところ問題なく動作しているようです。ただし、もう一度折りたたむと、コンテンツ領域のテキストが再配置されます。オバマの連中がどうやってこれを防いだのか説明できる人はいますか? コンテンツを 1 つの静的オブジェクトのようにスライドさせたり、スライドさせたりしたいと考えています。