レスポンシブでリサイズされたときにナビゲーションが非表示になってしまう

作成日: 2017年06月07日

jQuery

レスポンシブでサイトを作っていて、ハンバーガーボタンを実装中のこと。ナビを格納した状態でブラウザのリサイズをした場合にナビが隠れたままになってしまったため、以下のように対応。

$(document).ready(function(){ // 読み込まれたら
  var $window = $(this).width(); // ウィンドウ幅を取得して
  var bp = 1024;

  if($window > bp){ // 1024pxより大きかったら
    $("nav ul li").show(); // 表示
  }

// tablet・mobileのとき

  $("#toggle-button").on('click', function(){ // トグルボタンがクリックされたら
    $("nav ul li").slideToggle(); // ナビをスライド
    $("#toggle-button").toggleClass("active"); // トグルボタンに.activeをつける
  });

// ウィンドウがリサイズされたとき

  $(window).resize(function(){ // ウィンドウがリサイズされたら
    var $window = $(this).width();
    var bp = 1024;

    if($window > bp){
      $("nav ul li").show();
      $("#toggle-button").removeClass("active"); // ×印をハンバーガーに戻す
    }else{
      $("nav ul li").hide();
      $("#toggle-button").removeClass("active"); // ×印をハンバーガーに戻す
    }
  });
});

$(document).ready(function(){ // 読み込まれたら

var $window = $(this).width(); // ウィンドウ幅を取得して

var bp = 1024;

if($window > bp){ // 1024pxより大きかったら

$("nav ul li").show(); // 表示

}

// tablet・mobileのとき

$("#toggle-button").on('click', function(){ // トグルボタンがクリックされたら

$("nav ul li").slideToggle(); // ナビをスライド

$("#toggle-button").toggleClass("active"); // トグルボタンに.activeをつける

});

// ウィンドウがリサイズされたとき

$(window).resize(function(){ // ウィンドウがリサイズされたら

var $window = $(this).width();

var bp = 1024;

if($window > bp){

$("nav ul li").show();

$("#toggle-button").removeClass("active"); // ×印をハンバーガーに戻す

}else{

$("nav ul li").hide();

$("#toggle-button").removeClass("active"); // ×印をハンバーガーに戻す

}

});

コメントをするコメントをキャンセル

コメントはありません。

レスポンシブでリサイズされたときにナビゲーションが非表示になってしまう

コメントをする コメントをキャンセル

コメント

コメントをするコメントをキャンセル