Sidrで右メニューにCloseボタンを付ける際の注意点:メモ

Sidrは、リンクを押すことにより横から（上からもできるみたいですが）メニュー（ドロワーメニュー）を表示させるjQueryプラグインです。

左右どちらからのスライドに対応していて便利なのですが、デフォルトではない右にすると閉じるボタンの設置に少々手こずったのでメモとして記事にします。

Sidrとは

プラグインの説明が本題ではありませんので、冒頭で書いた以上の詳細は下記のリンクよりどうぞ。

• Sidr

そのまま使えるサンプルコードがありますので、なにかおかしいと思ったらまずはサンプルそのままで確認し、それから手を加えるのが早いです。

GitHubの更新日時が1年前で止っていますから、その点は一応気にしておいた方が良いかもしれません。

PageSlide

同種のプラグインに「pageslide」がありますが、2014.11現在はページがないようです。

作者のページには項目として存在していますが、その項目のリンク先自体がNot Foundのページになっていました。

右メニューの実装

先に右メニューの実装ですが。説明ページの「Create Multiple Menus」の部分の「#right-menu」のあたりを使うだけです。以下は分かりやすくするためにまとめたものです。

<a id="right-menu" href="#right-menu">Right Menu</a>

<div id="sidr-right">
  <ul>
    <li><a href="#">List 1</a></li>
    <li><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function() {
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>

スワイプに対応させる

追加でjQueryのプラグインを読み込めば、スワイプに対応させることもできます。これも説明ページに書いていますが一応。なお、右メニューの場合はサンプルのCloseとOpenのスワイプが違いますので、そこは書き換えています。

<script src="javascripts/jquery.touchwipe.js"></script>
 
<script>
      $(window).touchwipe({
        wipeRight: function() {
          // Close
          $.sidr('close', 'sidr-main');
        },
        wipeLeft: function() {
          // Open
          $.sidr('open', 'sidr-main');
        },
        preventDefaultEvents: false
      });
</script>

「jquery.touchwipe.js」が新たに必要ですが、それ以外でオプションを設定する必要は無く、上記の「$(window).touchwipe{}」の部分を追加すれば動きます。

Closeボタンをつける

Sidrで困るのは、メニューを開くボタンと閉じるボタンが同じだということです。場所によっては隠れてしまい閉じることができなくなります。また、どうやらメニュー外をタッチやクリックして閉じる機能もありません。

そこで必要になるのが、スライドして出てくるメニューの中にCloseのボタンをつけることです。左メニューなら下記のサイトで紹介されている情報でできると思いますが…。

• 【Stinger2】横からニュッと出てくるメニューを実装できるjQueryプラグイン「Sidr」をご紹介！

右メニューに用いると、右を閉じてそのまま左が開くような動作になり使えませんでした。手法としてちょっと違和感のあるやり方でもありましたので、例のごとく英語のサイトを漁りに。

プラグインのGitHubページで前項のスワイプを閉じる動作に「close」を使っていたので、動作的にできなくはないだろうとあたりを付けていましたが、下記のページに情報がありました。

• Close button inside Sidr #21
• How to add a custom close button

上記を合わせて整えたのが以下のものです。

<a href="#" onclick="jQuery.sidr('close', 'sidr-right');">close</a>

「sidr-right」の部分は、ドロワーメニューを囲むdivにつけた「id=”sidr-right”」のID名を用います。

右メニュー/スワイプ開閉/Closeボタンのコード

最終的には以下のようになります。

<a id="right-menu" href="#right-menu">Right Menu</a>

<div id="sidr-right">
<a href="#" onclick="jQuery.sidr('close', 'sidr-right');">close</a>
  <ul>
    <li><a href="#">List 1</a></li>
    <li><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function() {
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
　　$(window).touchwipe({
      wipeRight: function() {
        $.sidr('close', 'sidr-main');
      },
      wipeLeft: function() {
        $.sidr('open', 'sidr-main');
      },
      preventDefaultEvents: false
    });
});
</script>

結び

詳細な説明があるのに、いざ実装すると上手くいかないことが多い。

スキル不足以外の何者でもないのでしょうね…。