Dotsunited-off-canvas-navigation NPM

Off-Canvas Navigation

Off-Canvas Navigation utilities.

Usage

With webpack:

var setup = require('dotsunited-off-canvas-navigation/lib/setup');
setup('off-canvas-navigation');

@import "~dotsunited-off-canvas-navigation/lib/mixins";

.off-canvas-navigation-button {
    .dotsunited-off-canvas-navigation-button(off-canvas-navigation);
    
    // Custom styles
    position: absolute;
    top: 10px;
    right: 10px;
}

.off-canvas-navigation-menu {
    .dotsunited-off-canvas-navigation-menu(off-canvas-navigation);
}

.off-canvas-navigation-backdrop {
    .dotsunited-off-canvas-navigation-backdrop(off-canvas-navigation);
}

HTML

<button
    aria-label="Open navigation"
    aria-controls="off-canvas-navigation-menu"
    aria-expanded="false"
    class="off-canvas-navigation-button"
    data-off-canvas-navigation-toggle
>
    <span><span></span></span>
</button>

<div aria-hidden="true" class="off-canvas-navigation-backdrop"></div>

<section
    id="off-canvas-navigation-menu"
    aria-hidden="true"
    class="off-canvas-navigation-menu"
>
    <nav>
        <ul>
            <li>...</li>
        </ul>
    </nav>
</section>

How-tos

Change the size of the button

To change the size of the button, just set a different width and height for the first nested <span>.

@import "~dotsunited-off-canvas-navigation/lib/mixins";

.off-canvas-navigation-button {
    .dotsunited-off-canvas-navigation-button(off-canvas-navigation);

    > span {
        width: 100px;
        height: 90px;
    }
}