JB Framework

Off-Canvas

Right

Show Menu

<p>
    <button class="off-canvas__toggle" data-off-canvas="#a" type="button">Show Menu</button>
</p>

<div class="off-canvas off-canvas--right" id="a">
    <ul class="navmenu">
        <li class="navmenu__item">
            <button class="navmenu__button off-canvas__toggle" data-off-canvas="#a" type="button">Close Menu</button>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Paul</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">George</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
        </li>
    </ul>
</div>

Left

Show Menu

<p>
    <button class="off-canvas__toggle" data-off-canvas="#b" type="button">Show Menu</button>
</p>

<div class="off-canvas off-canvas--left" id="b">
    <ul class="navmenu">
        <li class="navmenu__item">
            <button class="navmenu__button off-canvas__toggle" data-off-canvas="#b" type="button">Close Menu</button>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Paul</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">George</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
        </li>
    </ul>
</div>

Bottom

Show Menu

<p>
    <button class="off-canvas__toggle" data-off-canvas="#c" type="button">Show Menu</button>
</p>

<div class="off-canvas off-canvas--bottom" id="c">
    <ul class="navmenu">
        <li class="navmenu__item">
            <button class="navmenu__button off-canvas__toggle" data-off-canvas="#c" type="button">Close Menu</button>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Paul</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">George</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
        </li>
    </ul>
</div>

Top

Show Menu

<p>
    <button class="off-canvas__toggle" data-off-canvas="#d" type="button">Show Menu</button>
</p>

<div class="off-canvas off-canvas--top" id="d">
    <ul class="navmenu">
        <li class="navmenu__item">
            <button class="navmenu__button off-canvas__toggle" data-off-canvas="#d" type="button">Close Menu</button>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link navmenu__link--current" href="javascript:void(0)">John</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Paul</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">George</a>
        </li>
        <li class="navmenu__item">
            <a class="navmenu__link" href="javascript:void(0)">Ringo</a>
        </li>
    </ul>
</div>