Sidr

スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。

FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。

今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。

サンプルを2つ作ってみました。

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その1

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その2

設置もとても簡単です。

まずは、Sidr – A jQuery plugin for creating side menusから、ファイルを一式ダウンロードしてきます。

そして、<head>部分でcssファイルを読み込ませます。あらかじめ用意されているデザインに、darkとlightの2種類がありますので好きな方を設定します。jquery.sidr.dark.cssまたは、jquery.sidr.light.cssを選びます。(パスに注意しましょう)

続いて、</body>の直前にJavaScriptを読みこませる記述をします。

これで準備完了です。

<body>にメニューの中身を設定します。

<li>要素クラスをactiveにすると、そのメニューが選ばれた状態になります。

サンプルでは、左と右の両方にメニューがでるようにもしています。

最後にそのサンプルのソースを書いておきます。どうぞご参考まで。


あわせてお読みください