Javascript

【Javascript】モバイルメニューコンポーネントDrawerr

July 2, 2017
drawerr

DrawerrはjQueryに依存しないモバイルメニューコンポーネント。

Usage

CSS

<link rel="stylesheet" href="dist/drawerr.css">

JS

<script src="dist/drawerr.js"></script>

Hamburger HTML

<button class="toggleDrawer">
    <span></span>
    <span></span>
    <span></span>
</button>

Drawerr HTML

<nav id="drawer" class="drawerr--init">
    <ul>
        <li>
            <span class="section-title active">Gezus</span>
            <ul>
                <li>
                    <a class="active" href="#">rebum</a>
                    <ul>
                        <li><a class="active" href="#">case novum</a></li>
                        <li><a href="#">iisque</a></li>
                    </ul>
                </li>
                <li><a href="#">vix purto</a></li>
            </ul>
        </li>

        <li>
            <span class="section-title">quodsi</span>
            <ul>
                <li><a href="#">nullam</a></li>
                <li>
                    <a href="#">corpora philosophia</a>
                    <ul>
                        <li>
                            <a href="#">mallan</a>
                        </li>
                        <li>
                            <a href="#">rebum</a>
                            <ul>
                                <li><a href="#">case novum</a></li>
                                <li>
                                    <a href="#">iqtario</a>
                                    <ul>
                                        <li><a href="#">faari</a></li>
                                        <li><a href="#">elissee</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
<nav>

Drawerr JS

const args = {
    drawerr: '#drawer',
    toggleBtn: '.toggleDrawer',
    navbar: 'header'
};

new drawerr().init(args);