jQuery

【jQuery】スマホサイトにも使えそうなOff Canvas Infinity Push Mobile Navigation

January 18, 2016

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したOff Canvas Infinity Push Mobile Navigationの使い方です。スムーズなアニメーションでサイドからナビゲーションをスライドして表示してくれるプラグインです。

CSS・jQuery

jQuery本体は1.7以上

<!-- Basic stylesheet -->
<link rel="stylesheet" type="text/css" href="plugin/jquery.ma.infinitypush.css" />

<!-- Include js plugin -->
<script src="plugin/jquery.ma.infinitypush.js"></script>

HTML Markup

<nav id="primary-navigation">
    <ul>
        <li><a href="#">Link</a>

            <ul>
                <li><a href="#">Link</a>

                    <ul>
                        <li><a href="#">Link</a>

                            <ul>
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                            </ul>

                        </li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>

                </li>
                <li><a href="#">Link</a>

                    <ul>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>

                </li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>

        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

プラグイン

<script type="text/javascript">

    $(document).ready(function(){

        $('#primary-navigation').infinitypush({
            openingspeed: 300,
            closingspeed: 300
        });

    });

</script>

オプション

offcanvas オフキャンバス
offcanvasspeed オフキャンバスのアニメーション
offcanvasleft オフキャンバスを左側に
openingspeed 開く時のアニメーション
closingspeed 閉じる時のアニメーション
pushdirectionleft プッシュ方向は右から左
spacing 間隔
autoScroll オートスクロール
scrollSpeed スクロールスピード
destroy ナビゲーションをリセット

ライセンスはMIT