drawer.js でドロワーメニューを簡単作成でもjQueryのプラグインがあると動かない場合ある。【サンプルコードあり】

今回、drawer.js でドロワーメニューが簡単に装着できると
効いたので早速実装してみました。

実装はほんとに簡単で、head内にdrawer.cssなどを追加、
body内に決められたコードを挿入。

最後</body>の直前にscriptコード入れて完了です。

まとめて書くとこんな感じです。

 <head>
  <!-- drawer.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
  <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
  <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>

 </head>

  <body class="drawer drawer--left">
    <header role="banner">
  <!-- ハンバーガーボタン -->
      <button type="button" class="drawer-toggle drawer-hamburger">
        <span class="sr-only">toggle navigation</span>
        <span class="drawer-hamburger-icon"></span>
      </button>
  <!-- ナビゲーションの中身 -->
      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu">
          <li><a class="drawer-brand" href="#">Brand</a></li>
          <li><a class="drawer-menu-item" href="#">Nav1</a></li>
          <li><a class="drawer-menu-item" href="#">Nav2</a></li>
        </ul>
      </nav>
    </header>
    <main role="main">
  </main>

  <!-- drawer利用の宣言 -->
    <script>
      $(document).ready(function() {
        $('.drawer').drawer();
      });
      </script>
  </body>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>

</head>

<span class="sr-only">toggle navigation</span>

</button>

<li><a class="drawer-brand" href="#">Brand</a></li>

</ul>

</nav>

</header>

</main>

$(document).ready(function() {

$('.drawer').drawer();

});

</script>

</body>

これだけで下記のように、バーガーボタンとボタン押すと
メニューが表示されるようになります。

こんな感じ

コード書いてもここまで表示されなければ、うまく反映
されてない可能性があります。

私の場合は、コード書いてどこまで反映されるのわからなかったので
メニューの設定も必要なのかなとその方法も探しました。

でも、上の動画の状態まで出来てるので、エラーが無ければ
細かい設定するだけで完了で簡単に出来ます。

エラーか確認する方法
jQueryのプラグインを複数入れてる場合は注意
実際に解決した方法
最終的にうまくいったコード

エラーか確認する方法

もし、表示されない場合は、デベロッパーツール開いて、
上部のコンソールをクリックして、エラーが出てないか確認します。

私の場合はこんな感じでエラーが出てました。

Uncaught TypeError: $(…).drawer is not a function
at HTMLDocument.<anonymous> (headertest.html:392:22)
at l (jquery.min.js:2:29375)
at c (jquery.min.js:2:29677)

jQueryのプラグインを複数入れてる場合は注意

この、drawer.js　は複数のプラグインを入れてる場合、エラーに
なるような感じです。

以前にも、jQueryのプラグイン干渉聞いたことはあったので
もしかしてとは思ってましたが。。。。

今回、ＰＣ表示時にナビメニューで使ってたのでそれと干渉してるのかな？

実際に解決した方法

試しに、今回のdrawer.js用で挿入した、scriptコードの前に
下記のコードを追加しました。

jQuery.noConflict();
(function($) {
と
})(jQuery);
で囲ってあげると解消されるみたいなのでやってみたらＯＫでした。

無事に表示されるようになりました。

最終的にうまくいったコード

ＨＴＭＬ　</head>のすぐ上に挿入

ここに入れる script ソースの順番に注意！
今回は、先に入れてる方のソースを上に置かないとエラーになりました。

  <!-- drawer.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
  <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
  <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>