横からにゅるっとメニュー（ドロワーメニュー）を実装してみた

#にゅるにゅるさせたい

スマホサイトの開発で「ドロワーメニュー（あの、ボタン押すと横からにゅるっと出てくるやつ）」が欲しいな〜　ということで探していた所、いくつかいいもの見つけました。

##sidr
http://www.berriart.com/sidr/

##jSlideMenu
http://qiita.com/ukitaka/items/64e4589e37944bf032d9

##jquery slim menu
http://adnantopal.github.io/slimmenu/

他にもいろいろあるようなので、下記を参照。
http://liginc.co.jp/web/js/jquery/56550

#どれがいいの？

上の３つ、全て試してみたところ、sidrがいいなあ、と思いました。
実装がしやすいのと、右から、左から、レスポンシブメニュー、などなど、デフォルトで色々なオプションが備わっていたからです。

jSlideMenu は、なぜかチラつきが多かったです。
ぬるぬる気持ちいいとの評判があるので、私の手違いがあったのかも。

jquery slim menuはお手軽、レスポンシブ。
でも横からにゅるっとではなく、縦方向でした。
特にレスポンシブは求めなかったので、今回はパス。

ということでsidrを採用！
実装方法はここで書くまでもないでしょう。

#sidrのちょっとしたTips

実装自体は公式ドキュメントに従って簡単にできましたが、
ちょっと気になる部分がありました。

スマホで見ると、ロードする時に一瞬、<li>内のテキストがまる見えに。
まあ、ほんの少しで消えるけど。気になる…。

解決策は、メニュー部分のidに display:none を入れるだけ。

<div id="sidr" style="display:none">
  <!-- Your content -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

当たり前といえばそうですが。

あとは、メニューに「閉じる」ボタンを付けたいと思っています。
メニューボタンではなくて、テキストの「閉じる」を押したらメニューが引っ込むようにしたい。
さて、これはどうやって実装しようかなあ。

次回に？続く。