LoginSignup
58

More than 5 years have passed since last update.

jQueryでスライドメニュー(横から出てくるやつ)を実装する

Last updated at Posted at 2015-04-04

スライドメニューを実装できるjQueryプラグインを書いたので、使い方をメモします。

ダウンロード

デモ

1.gif

使い方

まず、必要なファイルをインクルードします:

<link rel="stylesheet" href="jquery.sidemenu.css">
<script src="jquery.js"></script>
<script src="jquery.sidemenu.js"></script>

次に、サイドメニューにdata-role="sidemenu"、表示用リンクにdata-role="sidemenu-toggle"を付与します。
あとは、サイドメニューに付与したidへのハッシュリンクを作成します。

<div id="sidemenu" data-role="sidemenu">
  <ul>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Menu</a></li>
    <li class="divider"></li>
    <li><a href="#sidemenu" data-role="sidemenu-toggle">Close</a></li>
  </ul>
</div>

<a href="#sidemenu" data-role="sidemenu-toggle">Open side menu</a>

li.dividerでメニューを区切ることもできます。

以上で、デモのような動きを実装することができます。

カスタマイズ

メニューを表示する位置と、アニメーションの速度を変更できます:

$.sidemenu({
  side: 'right', // Show side menu on right
  speed: 200     // Animation speed
});

2.gif

その他のプラグインとの違い

このカテゴリの有名どころとしてはSidrなどがあります。
Sidrとの違いは以下のような点が挙げられます:

  • JavaScriptを書く必要がない(data-roleに自動でイベントをバインドする)
  • フラットデザインである
  • 必要最低限の機能のみ実装しており、コードを把握しやすい

備考

このプラグインは、開発中のRailsアプリに導入する目的で実装しました。
これからしばらくドッグフーディングを行ない質を上げていきます。

フィードバックなどお待ちしております :)

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
58