Javascript

【Javascript】モバイルナビゲーションバー用のウィジェットライブラリTouch side swipe

December 17, 2016

Touch side swipeはモバイルナビゲーションバー用のウィジェットライブラリ。

CSS

<link rel="stylesheet" href="../src/touch-sideswipe.css">

HTML

<div id="touchSideSwipe" class="touch-side-swipe">
    <ul>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
        <li><a href="#">navbar</a></li>
    </ul>
</div>

JS

    <script src="../src/touch-sideswipe.js"></script>
    <script type="text/javascript">
        var config = {
            elementID: 'touchSideSwipe',
            elementWidth: 400, //px
            elementMaxWidth: 0.8, // *100%
            sideHookWidth: 44, //px
            moveSpeed: 0.2, //sec
            opacityBackground: 0.8,
            shiftForStart: 50, // px
            windowMaxWidth: 1024, // px
        }
        var touchSideSwipe = new TouchSideSwipe(config);
    </script>

MIT

Download