サイドメニューをドロワーメニューに切り替えるレスポンシブルデザインができません。

初めて質問させて貰います。至らぬ点があるかもしれませんが宜しくお願い致します。
###前提・実現したいこと
スマホで見る場合、サイドメニューがドロワーメニューになるように施行しております。
bigslide.jsという既存のjqueryプラグインを組み込みました。
ブラウザが768px以上のときにbigslide.jsが起動しないようにnavタグに"menu"というIDを外すための命令文を付け加えました。

###発生している問題・エラーメッセージ

最初のブラウザ起動時しかウィンドウサイズを判定して貰えず、ブラウザのサイズを変えることでスマホとPCの画面の切り替えができません。

###該当のソースコード
html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
・・・
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bigSlide.js"></script>
<script>
  $(document).ready(function() {
    $('.menu-link').bigSlide();
  });
</script>
<title>#</title>
</head>
<body>
  <div class="wrapper">
    <header class="header">
      <div>・・・</div>
    </header>
    <div class="contents">
      <nav class="side-menu panel" role="navigation"> <!-- ここにbigslide.jsが#menuを追記してドロワーメニューに切り替えます。 -->
        <ul>
          <li class="#"><a href="#">メニュー1</a></li>
          <li class="#"><a href="#">メニュー2</a></li>
          <li class="#"><a href="#">メニュー3</a></li>
          <li class="#"><a href="#">メニュー4</a></li>
          <li class="#"><a href="#">メニュー5</a></li>
        </ul>
      </nav>
・・・

jquery

/*! bigSlide - v0.12.0 - 2016-08-01
* http://ascott1.github.io/bigSlide.js/
* Copyright (c) 2016 Adam D. Scott; Licensed MIT */
//-------------------------------------------------
//・オリジナルの部分
//-------------------------------------------------
$(window).resize(function(){
    var w = $(window).width();
    var x = 768;
    if (w >= x) {
        $('nav').attr('id', 'menu');
    } else {}
});
//--------------------------------------------------
//・bigslide.js
//--------------------------------------------------
(function (factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {
  'use strict';

  // where inlineCSS is the string value of an element's style attribute
  // and toRemove is a string of space-separated CSS properties,
  // _cleanInlineCSS removes the CSS declaration for each property in toRemove from inlineCSS
  // and returns the resulting string
  function _cleanInlineCSS(inlineCSS, toRemove){
    var inlineCSSArray  = inlineCSS.split(';');
    var toRemoveArray   = toRemove.split(' ');

    var cleaned         = '';
    var keep;

    for (var i = 0, j = inlineCSSArray.length; i < j; i++) {
      keep = true;
      for (var a = 0, b = toRemoveArray.length; a < b; a++) {
        if (inlineCSSArray[i] === '' || inlineCSSArray[i].indexOf(toRemoveArray[a]) !== -1) {
          keep = false;
        }
      }
      if(keep) {cleaned += inlineCSSArray[i] + '; ';}
    }

    return cleaned;
  }


  $.fn.bigSlide = function(options) {
    // store the menuLink in a way that is globally accessible
    var menuLink = this;

    // plugin settings
    var settings = $.extend({
      'menu': ('#menu'),
      'push': ('.push'),
      'shrink': ('.shrink'),
      'hiddenThin': ('.hiddenThin'),
      'side': 'left',
      'menuWidth': '15.625em',
      'semiOpenMenuWidth': '4em',
      'speed': '300',
      'state': 'closed',
      'activeBtn': 'active',
      'easyClose': false,
      'saveState': false,
      'semiOpenStatus': false,
      'semiOpenScreenWidth': 480,
      'beforeOpen': function () {},
      'afterOpen': function() {},
      'beforeClose': function() {},
      'afterClose': function() {}
    }, options);

//以下オプションなどが記載されていました。文字数制限のために省略しました。

###試したこと
ネット上で調べましたが、解決策が見つかりませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
DWを仕様。最新バージョンのgoogle chromeとfirefoxで施行しております。

kei344

2017/02/11 04:57

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

s8_chu

2017/02/11 05:08 編集

HTMLの追記をしていただけませんか？また、CSSを記述している場合はそちらの追記もよろしくおねがいします。

NekGreen

2017/02/11 05:31

只今気が付きました。修正させていただきます。

行動規範の内容に同意します

回答2件

あまり詳しくプラグインの仕様を見ていませんが、このような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <title>タイトル</title>
7    <style type="text/css">
8        .wrap {
9            position: relative;
10        }
11
12        #menu_wrap {
13            display: none;
14        }
15    </style>
16</head>
17<body>
18<div class="wrapper">
19    <header class="header">
20        <div>
21            <div class="wrap push" id="menu_wrap">
22                <a href="#menu" class="menu-link">&#9776;</a>
23            </div>
24        </div>
25    </header>
26    <div class="contents">
27        <nav id="menu" role="navigation">
28            <ul>
29                <li><a href="#">テキスト1</a></li>
30                <li><a href="#">テキスト2</a></li>
31                <li><a href="#">テキスト3</a></li>
32            </ul>
33        </nav>
34    </div>
35</div>
36<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
37<script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>
38<script>
39    $(document).ready(function () {
40        $(window).resize(function () {
41            if (window.matchMedia("(max-width: 768px)").matches) {
42                $("#menu_wrap").css({"display": "block"});
43                $(".menu-link").bigSlide();
44            } else {
45                $("#menu_wrap").css({"display": "none"});
46                $("#menu").prop("style", "");
47            }
48        });
49    });
50</script>
51</body>
52</html>

投稿2017/02/11 05:39

編集2017/02/11 06:03

s8_chu

総合スコア14731

NekGreen

2017/02/11 05:55 編集

はい。そのような動作となります。しかしスクリプトタグのところが若干違いました。 ``` <script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script> ``` 質問文のところに改めて具体的にhtmlの記載をさせていただきますね。

s8_chu

2017/02/11 06:03 編集

スクリプトタグのところが違う、というのはどのような意味でしょうか？もう少し詳しいご説明をいただきたいのですが。また、質問者さんのHTMLの記載にあわせ、回答のHTMLを修正させていただきました。

行動規範の内容に同意します

jQueryには詳しくないですが、ある要素を表示させないようにするのであればCSSで実装する方法がシンプルな気がします・・・。

CSS
1@media screen and (max-width: 768px) {
2    /* 979px以下用（タブレット用）の記述 */
3#menu{
4display: none;
5}
6}
7

こんなのでよければ、是非お試しください。

投稿2017/02/11 04:07

KeijiKawashima

総合スコア47

NekGreen

2017/02/11 04:44

迅速な回答をありがとうございます。しかし、此方の説明不足でした。ごめんなさい。下記にドロワーメニューのhtmlを記載します。 <nav> //ここにjqueryで#menuが入ります。 <ul> <li>・・・</li> <li>・・・</li> <li>・・・</li> <li>・・・</li> <li>・・・</li> <li>・・・</li> </ul> </nav> ここに#menuが入るとbigslide.jsが働いてドロワーメニューに切り替わります。あまり詳しくはありませんが、お教え頂いた方法だと何か引っかかるような気がしています。一度試させて貰い、解決しましたらベストアンサーを押させて貰います。ありがとうございました。

行動規範の内容に同意します

あなたの回答