クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」

スマホでよく見る右上の三本線をタップしたらメニューを表示するやつ。
あれをjQueryプラグイン「Scotch Panels ? jQuery Off Canvas Menus and Panels Plugin」を利用することでさくっと実現できます。
クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」サンプル

使用方法
Scotch Panels ? jQuery Off Canvas Menus and Panels Pluginからファイル一式をダウンロード。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="scotchPanels.js"></script>
<script>
$(function(){
$('#scotch-panel').scotchPanel({
containerSelector: 'body',
direction: 'right', //出てくる方向 top, left, right, bottom
duration: 300,
transition: 'ease', //効果 linear, ease, ease-in, ease-out, ease-in-out,
clickSelector: '.toggle-panel', //クリックさせる要素
distanceX: '70%', //動く量
enableEscapeKey: true //ESCKeyで閉じれるか
});
});
</script>

あとはメニュー部分とクリックさせたいものを用意します。
<div id="scotch-panel">
<ul>
<li><a href="#">Home</a></li>
</ul>
</div>
</code></pre>

最後にクリックさせる要素です。
<a href="#" class="toggle-panel">menu</a>
toggleになっているので、隠れても表示できる位置に固定しておくと良いでしょう。

クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」サンプル

sponsors

「クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」」をシェアする

記事作成:
記事URL:

TOP > > > クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」