jQuery

【jQuery】タッチスワイプと連動するスライドスワイプメニューSlide and Swipe Menu

July 11, 2016
Slide and Swipe Menu

【jQuery】スマホサイトなどで使えそうなオフキャンバスやドロワーメニュー系jQueryプラグイン10選でご紹介したSlide and Swipe Menu。Slide and Swipe Menuはタッチスワイプと連動する軽量のスライドスワイプメニュー。

必要なファイルをロード

<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- touchSwipe library -->
<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>

<!-- Sliding swipe menu javascript file -->
<script src="../jquery.slideandswipe.js"></script>

HTML markup

<body>
    <nav>
        [...]
    </nav>
    <main>
        [...]
        <a class="ssm-toggle-nav" href="#" title="Open / close">Open / close</a>
    </main>
    <div class="ssm-overlay ssm-toggle-nav"></div>
</body>

プラグインを初期化

<script>
    $(document).ready(function() {
        $('nav').slideAndSwipe();
    });
</script>

CSS

/* navigation */
nav {
    height: 100%;
    width: 280px;
    background-color: #0a4a3c;
    left: 0;
    top: 0;
    z-index: 2;
    position: fixed;
    overflow-y: auto;
    overflow-x: visible;
    transform: translate(-280px,0);
}
/* overlay layer */
.ssm-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    display: none;
    z-index: 1;
}

MITライセンス