0

横からスライドインするメニューを実現できるjQueryプラグイン「sidr.js」の使い方!

横からスライドインするメニューを実現できるjQueryプラグイン「sidr」の使い方!

目新しいものではありませんが、スマホサイトなどでよく見かける「左側からスルッっと現れるメニューリスト」を簡単に実現することができるjQueryプラグイン「sidr.js」の使い方を、初めて利用しようとしている人向けにメモしておこうと思います。

 

▼まずは、デモサンプルを確認してみてください。

DEMO(dark) DEMO(light)

 

このようなメニューを設置していきましょう。

 

1.sidrをダウンロード

sidrからファイルを一式ダウンロードします。

sidr.js

 

2.CSSを読み込む

デフォルトで用意されているテーマは「dark」「laght」の2種類です。お好きな方を選んでCSSを読み込みます。

 

 3.jQueryとJavaScriptを読み込む

jQueryを読み込んだ後、sidr.jsを読み込みJavaScriptを記述します。

 ID名「#simple-menu」に対して「sidr();」という処理をする命令を出しています。

 

4.HTMLに簡単なメニューを記述

ここではサンプルとしてシンプルなメニューを配置していきます。

 

5.サンプルのMENUボタン

menu-btn

サンプル用のボタンは以下のようにCSS(style.css)を指定しています。

 

以上で設定は完了です。

 

また、この「sidr」のスライド方向は、デフォルトで左からのスライド表示になっていますが、これを右からのスライドにすることもできます。

左からの場合と、右からの場合でそれぞれ見ていきましょう。

 

6-1.左からのスライド darkパターン(デフォルト)

 

left-pat

HTML

JavaScript

CSS

DEMO:左からスライド(dark)

 

6-2.右からのスライド lightパターン

right-pat

HTML

 JavaScript

 CSS

 DEMO:右からスライド(light)

 

解説

それぞれ記述の仕方は下記のように同色の部分は同じID名にする必要があります。

sidr解説

基本的な枠組みはこのままでも使用できますが、使用したいサイトに合うようにサイズや動きなどもカスタマイズして使えるようになるといいですね。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 横からスライドインするメニューを実現できるjQueryプラグイン「sidr.js」の使い方!