WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

resizeに対応したイベント設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントを指定する必要があります。
例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。

PC時ではナビゲーションボタンはもちろん表示されている状態ですが、スマホハンバーガーメニューではナビゲーションボタンは最初、非表示に設定されています。
スマホ時のナビゲーションボタンを「slideToggle」などで表示・非表示をコントロールしている場合、1度出して、閉まったナビゲーションボタンには「display:none」がかかった状態になって閉まっています。
この状態で、ブラウザーをPCサイズにリサイズすると、ナビゲーションボタンに「display:none」がかかったままなので、ナビゲーションボタンが非表示の状態になっています。
なので、jQueryでリサイズ時にイベントを指定する必要があります。

resizeイベントの設定

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません。

読み込み時とリサイズ時を同時に処理する場合

$(window).on('load resize', function(){
// 処理を記載
});

ただし、iPhoneandroidではresizeイベントの定義が若干違く、このままではiPhoneでおかしな動きになってしまいます。
横幅飲みに対応したresizeイベントの記述

$(function(){  
var windowWidth = $(window).width();

$(window).on('load resize', function(){
  var ww = $(window).width();
  if(windowWidth != ww) {
    if($(window).innerWidth() < 768 ){
    //スマホの時の状態
    $('#gnav').hide();//SPの時はnavを非表示にしておく
  }else{
    //タブレット・PCの時の状態
    $('#gnav').show();//SP以外の時はnavを表示しておく
    $('#hum').find('span').removeClass('click');
  };
   windowWidth = ww;
  };
});
  $('#hum').on('click',function(){
    $(this).find('span').toggleClass('click');
    $('#gnav:not(:animated)').slideToggle(100);
});
});


サンプル

RWD-ハンバーガーメニュー