menu

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

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

sponsors

使用方法

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になっているので、隠れても表示できる位置に固定しておくと良いでしょう。

サンプル

右上のmenuをクリックして下さい。
Javascriptサンプルページ一覧
skuare.net

sponsors