Last Sidebar Demo v1.3.0

プラグインの特徴

• 画面の横からスライドしてくるメニューを実装するためのプラグイン
• CSSでデザインは自由にカスタマイズ可能
• レスポンシブデザインにも対応
• Chrome, Safari, Opera, Internet Explorer 9+, iOS 8+, Android 4.4+ にて検証済み

使い方

必要なファイルを読み込む

clickイベントの代わりにjQueryMobileのtapイベントを使用しています。
そのためjQueryMobileのモバイルイベント処理の部分のみを抜き出したファイルも一緒に読み込みます。

<link rel="stylesheet" href="last-sidebar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.mobile.events.js"></script>
<script src="jquery.last-sidebar.js"></script>

jQueryの記述

// デフォルト
$(function(){
  $('#slideMenu').lastSidebar();
});

// オプションを使用した場合
$(function(){
  $('#slideMenu').lastSidebar({
    itemTrigger: '#hamburger',
    align: 'left',
    speed: 200,
  });
});

CSSのカスタマイズ

last-sidebar.css の User Style: 以下にオリジナルのCSSを記述してください。

オプション

プロパティ	デフォルト	説明
itemTrigger	'#menuTrigger'	スライドさせるトリガーとなるaタグのid名を指定します。
align	'right'	どの方向からスライドするかを 'right' または 'left' のどちらかで指定します。
speed	300	スライドアニメーションのスピードを指定します。
breakPoint	false	ウィンドウの横幅がここに指定した数値を超えている時はスライドメニューの機能がオフになります。
noscroll	false	true の場合、ドロワーメニュー表示時に背景スクロールが無効になります。
openBefore	function(){}	ドロワーメニューが表示する直前に実行されます。
openAfter	function(){}	ドロワーメニューが表示する直後に実行されます。
closeBefore	function(){}	ドロワーメニューが閉じる直前に実行されます。
closeAfter	function(){}	ドロワーメニューが閉じる直後に実行されます。

メソッド

メソッド名	引数	説明
closeSlide	なし	ドロワーメニューを閉じます。