スマホでよく見る右上の三本線をタップしたらメニューを表示するやつ。
あれを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
コメントする
記事作成:2014年10月28日 10:05
記事URL:http://www.skuare.net/2014/10/jqueryscotch_panels.html
TOP > javascript > UI関連 > クリックするとサイドからメニューを表示させられるjQueryプラグイン「Scotch Panels」