slideUpやslideDownを使ったときのレスポンシブ対応

今回やりたいこと

スマホのハンバーガーメニュー内をjQueryのslideUpやslideDownを用いて実装した場合などに起きる現象なのですが、初期表示は「display: none;」で非表示にしているため、一度ハンバーガーメニューを開いたあとに、PCのブラウザ幅を変更してしまうと、PCサイズになってもCSSが反映されずヘッダーが思わぬ崩れ方をすることがあります。

実際にスマホでサイトを見ている場合はブラウザ幅の変更のしようがない(横向きにしたりはできますが。。。)のでいいのですが、Web開発者はよくブラウザ幅をギュイーンと変更しながら表示のチェックをするのでこういった崩れ方をするのはできれば避けたいです。

jQuery

私がよく付け加えるのは、画面のブラウザ幅を変更した時(ブレークポイントを超えたとき)に、画面をリロードさせるための処理です。

これを記述しておくだけで、ブレークポイントを超えたときに自ずとリロードされるので、PCのCSSを正しく読み込むことが可能になります。


$(window).on("resize", function() {
  var w = $(window).width();
  if (w > 897) {  // ブレークポイント(単位:px)
    window.location = window.location;
  }
});

結構便利だと思うので、使ってみてください。

related article

2019/12/10 JavaScript

jQueryでレスポンシブのfadein/outスライダー

2019/11/15 JavaScript

slick.jsをwebpackで使いこなす

2021/07/19 JavaScript

lazyload.jsとスピナーアイコンを組み合わせる

2019/10/15 JavaScript

Windowサイズが変わった時に行う処理