MASANAO MAEDA
PORTFOLIO

今やハンバーガーメニューは当たり前にある機能ですが、いざ実装してみようとなると、とても大変でした。いろんなサイトを検索しながらなんとか実装方法を見つけ、実装することはできたのですが、何か違和感を感じました。その違和感は「ハンバーガーメニューを展開した時に背景が動く」ことでした。私が直感的に感じた気持ちは「う〜ん、なんか気持ち悪いなあ」でした。

背景って固定すべきなのか？

ただ私はWEB初心者なので、本当に固定すべきなのかどうかの知識はありません。そこで色んなWEBサイトのハンバーガーメニューを見て、実際はどうなのかを調べてみたところ、６：４ぐらいで固定していないところの方が多かったです。正直、してもしなくてもどっちでもいいような感じではありましたが、私は自分の直感に従い固定することにしました。（最初に取り組んだ模写コーディングのサイトも固定していたということもあります）

背景を固定する方法

ハンバーガーメニュー展開時の背景固定は「JavaScript」と「CSS」で実装できます。まずは「JavaScript」での記述は下記のように行いました。

// ハンバーガーメニュー展開時の背景固定
$(function () {
  $(".ham").click(function () {
    // トリガーをクリックした時の条件分岐
    if ($(this).hasClass("is-active")) {
      // ナビを閉じるときの処理
      $("html").removeClass("is-fixed"); // 背景固定解除！
    } else {
      // ナビを開くときの処理
      $("html").addClass("is-fixed"); // 背景固定！
    }
    $(".ham").toggleClass("is-active");
  });
});
        

クリックした時に、指定のクラスをつけたり・外したりすることで「固定」と「解除」を行うことができました。あとは「CSS」の記述をするだけです。

　　　　html.is-fixed,
　　　　html.is-fixed body {
  height: 100%;
  overflow: hidden;
　　　　}
        

「CSS」の記述はこれだけです。これで背景の固定をすることができました。

ハンバーガーメニュー内でスクロール

もう一つ気になる点として、ハンバーガーメニューが長くなったときに、背景が固定されていてもメニュー内だけスクロールできるかどうかですが、これは「CSS」だけで実現できました。

　　　.drawer_container {
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
}
        

ハンバーガーメニューの箱に「overflow: auto;」を記述するだけです。

感想・まとめ

ハンバーガーメニュー展開時の背景固定をする方法自体はそこまで難しくはないと感じましたが、固定すべきかどうかというところは、サイト制作をする度に考えなければならないと思いました。固定する・しない、どちらにしても意味があると思いますので、「なぜそれをするのか」ということを、どのような場面でも考えていかなければならないと感じました。

参考サイト