先日、記事としてもあげていたスライダーメニューの「sidr」ですが、さっそく使ってみました。
予想よりも簡単に利用することができてしまい、「こ、これだけ？」と呆気にとられてしまいました。
では、今回も3分？でサクっと実装してみたいと思います。
作業開始！
まずは、下記のURLから必要なファイルをダウンロードしてきましょう。
Sidr – A jQuery plugin for creating side menus （デモページ）
http://www.berriart.com/sidr/
ページ内の「Download」ボタンからファイルをダウンロードする事ができます。
開始から1分経過
ダウンロードが完了したら、とりあえず使ってみましょう。
解凍の仕方がわからない場合には、Google先生に聞いてみてください。
解凍すると、こんな感じにディレクトリが展開されると思います。
[shell]
– stylesheets
– jquery.sidr.dark.css
– jquery.sidr.light.css
– component.json
– jquery.sidr.min.js
– README.md
[/shell]
必要になるファイルは、下記の2つだけです。
[shell]
– stylesheets（CSSは下記のどちらかを使う）
– jquery.sidr.dark.css
– jquery.sidr.light.css
– jquery.sidr.min.js
[/shell]
開始から2分経過
この2つを自分のサイトの構成にあった場所にファイルを配置して下さい。
配置したら、あとは利用したいページに下記の内容を記述するだけです。
OPEN
これだけで、スルッと出てくるメニューが実装出来てしまいます。
デフォルトのままだと左側からだけですので、ちょこっと設定を変えて動きを変えてみたいと思います。
開始から3分経過？
変更する場所は、scriptタグのあたりをチョコっといじるくらいです。
オプションとして、name: ‘sidr-right’、side: ‘right’を設定するだけで右側からスライドに切り替わります。
ほんと最近のプラグインなどは簡単に使えるようになっているので、ちょっとしたものを作りたいときには助かります。
近日中に他のメニューについても試したいと思います。
コメント