Javascriptのjqueryのdrawer.jsについてドロワーを左右に設置するにはどうすれば良いでしょうか。

Javascriptのjqueryのdrawer.jsについて
ドロワーを左右に設置するためにはどうすれば良いでしょうか。

以下ではうまく作動しませんでした。

<div class="drawer drawer--right">
<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">
<ul class="drawer-menu">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</nav>
</div>

<div class="drawer drawer--left">
<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">
<ul class="drawer-menu">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</nav>
</div>

特にドロワーメニューを閉じる時に☓ボタン以外を押したときの挙動が制御できません。

azuapricot

2019/01/21 08:43

コードはマークダウン<code> を使用して書いてください

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

回答1件

ベストアンサー

【Drawer - Flexible drawer menu using jQuery, iScroll and CSS.】
http://git.blivesta.com/drawer/

↑これでしょうか。
jQueryが1系統と古いので、他の物を探すことをお勧めはします。

最初から左右のサンプルがあるものを探してみては。

【ハンバーガーメニューの実装もこれなら簡単！パネルを左右上下からスライドさせる超軽量スクリプト -Pushbar.js | コリス】
https://coliss.com/articles/build-websites/operation/javascript/sliding-drawers-pushbar.html

【ドロワーメニューを簡単に実装できるjQueryプラグイン5選 | ProgramMemo】
http://program-memo.com/archives/401

~~下記のように右と左を区別するように書けば多分動くと思いますが、私がiScrollと相性が悪いのでテストはできませんでした。~~（20190130追記：独立して動かせませんでした）

js
1<div class="drawer drawer--right">
2  <button type="button" class="drawer-toggle drawer-toggle1 drawer-hamburger">
3    <span class="sr-only">toggle navigation</span>
4    <span class="drawer-hamburger-icon"></span>
5  </button>
6  <nav class="drawer-nav drawer-nav1">
7    <ul class="drawer-menu">
8      <li>リスト1</li>
9      <li>リスト2</li>
10      <li>リスト3</li>
11    </ul>
12  </nav>
13</div>
14
15<div class="drawer drawer--left">
16  <button type="button" class="drawer-toggle drawer-toggle2 drawer-hamburger">
17    <span class="sr-only">toggle navigation</span>
18    <span class="drawer-hamburger-icon"></span>
19  </button>
20  <nav class="drawer-nav drawer-nav2">
21    <ul class="drawer-menu">
22      <li>リスト1</li>
23      <li>リスト2</li>
24      <li>リスト3</li>
25    </ul>
26  </nav>
27</div>

js
1$( function() {
2  $('.drawer').each( function( i ) {
3    $( this ).drawer( {
4      class: {
5        nav: 'drawer-nav' + i,
6        toggle: 'drawer-toggle' + i,
7        //overlay: 'drawer-overlay' + i,
8        //open: 'drawer-open' + i,
9        //close: 'drawer-close' + i,
10        //dropdown: 'drawer-dropdown' + i
11      },
12      showOverlay: false
13    } );
14  } );
15} ); // 未テスト