LoginSignup
42

More than 5 years have passed since last update.

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

Posted at

にゅるにゅるさせたい

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

sidr

jSlideMenu

jquery slim menu

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

どれがいいの?

上の3つ、全て試してみたところ、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>

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

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

次回に?続く。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42