スマホメニュー開閉時に、バックグラウンドを消してしまう提案。

ブログだと、最新投稿などで縦幅が変わる

スマホのハンバーガーメニュー等、メニュー開閉時の後ろの本ページの扱いは考えどころかと思います。

css Fixed等の方法もあるようですが、他にjQueryプラグインなどでFixedが使われていると思わぬ表示崩れが起きたりしてうまくいかないことも（ボクがそうでした。）

特にブログ等のCMS系は、内容の増減に柔軟に対応できる大らかな動きがあとあとラクかと。

そんなわけで自分がやった
「邪魔なものは消してしまえ」
的発想の方法です。

一点だけ懸念点はスマホメニューOpen時もClose時も、ウインドウを一番上にする必要がある点です。

例）
このブログがその作りになっています。
ウインドウの幅を狭くすると、スマホメニュー用のハンバーガーメニューが出てきます。

大まかな作り

制作時から、スマホメニューと本文的なメインのdivは兄弟関係で分けておきます。

大まかな形

制御はjQueryでclickイベントでon off判定です。この辺は自由な方法で問題ないと思います。
（jQuery、fadeInが一番楽でしょうが、css3的な作りのほうが滑らかに動くのではと。）

Javascript

$("#menuButton").on( "click" , function(e){

    if( メニューの開閉の判定 ){ // 自分はスマホメニューにcss classでon/off判定してます $(this).attr("class") == "menuOff" 

        var h = $("#smpMenu").height();
        $("#smpMenu").css({
            display : "block",
            top: 0,
            height : h
        });
        $("div.wrapper").css({
            display : "none"
        });
        $(window).css("height" , h).scrollTop( 0 )

    }else{
        $("#smpMenu").css({
            display : "none"
        });
        $("div.wrapper").css({
            display : "block"
        }); 
    };
    return false;
});

// smpMenuからのリンクがページ戻りでsmpMenuオープン状態になってしまうので、メニュー解除が必要
$("#smpMenu a").on( "click" , function(){
    // 〜〜
});

解説

メニューOpen時

上記「大まかな形」の5行目から14行目。

        var h = $("#smpMenu").height();
        $("#smpMenu").css({
            display : "block",
            top: 0,
            height : h
        });
        $("div.wrapper").css({
            display : "none"
        });
        $(window).css("height" , h).scrollTop( 0 )

上から順番に、ざっくりと説明。
・スマホメニューの縦幅を図る（事前に最新投稿読み込みが完了しているものを非表示としてある）- 1行目
・スマホメニューを表示
・ウインド全体の位置を一番上に

WordPressのウィジット等、事前に非表示で読み込んでおけるので、量が多いスマホメニューでも安心です。

メニューClose時

上記「大まかな形」の17行目から22行目の抜粋。

        $("#smpMenu").css({
            display : "none"
        });
        $("div.wrapper").css({
            display : "block"
        }); 

特に難しいことなく、cssで表示のon offです。

ページバック時の処理

スマホメニューからリンクをクリックして戻った時、表示がおかしくなるので調整処理です。
上記「大まかな形」の27行目〜30行目の抜粋。

// smpMenuからのリンクがページ戻りでsmpMenuオープン状態になってしまうので、メニュー解除が必要
$("#smpMenu a").on( "click" , function(){
    // 〜〜 スマホメニューoffの設定
});

クリック時にスマホメニューのon off設定を切り替える必要があります。