今回の事象

ハンバーガーメニューをスマホの時だけに実装する場合、初期表示がスマホサイズの場合は当然ハンバーガーメニューになりますが、そのままWindowサイズを横に広げたり、iPhoneを横向き表示に変更したりすると思わぬ崩れ方をする場合があります。

ハンバーガーメニューをアコーディオンで実装したとします。アコーディオンを開いた状態でWindowサイズを変更してしまうとハンバーガーの中身のコンテンツのHTMLだけがそのまま残ってしまい、再読み込み（リロード）しない限り表示が正常に戻せないということが起こります。

そんな時に超便利なjQueryを紹介します。

jQueryの記述

$(window).resize(function () {                     // Windowサイズが変更された時
  var win = $(window).width();
  var bp = 768; // ブレークポイント（px）
  if (win > bp) {
    if ($(".js-trigger").hasClass("is-active")) {  // ナビが開いていたら
      $(".js-trigger").removeClass("is-active");   // ハンバーガーアイコンを元に戻す
      $(".js-nav-contents").slideUp();             // ナビを閉じる（非表示にする）
    }
  }
});

「$(window).resize」によって画面サイズが変更された時に行う処理を記述することができます。

今回はブレークポイントを768pxで設定しているので、768pxよりWindowサイズが広がったらスマホ表示のハンバーガーメニューを自ずと非表示（今回はSlideUpで実装）にするような記述にしました。

非表示になるのであまり関係ありませんが、この時にハンバーガーアイコンも初期状態（3本線の状態）に戻しておくと親切です。

これによってハンバーガーメニューボタンを押さなくても、Windowサイズが768px以上に広がったら自動的にナビメニューを非表示にすることができました。