Off Canvas

Off canva menus require jQuery and the Mercury UI Framework off canvas plugin to work. Note: You will need to initialize them by calling $().mercuryuiOffCanvas();.

You can also open and close menus individually via the plugin through actions by targeting the id of the menu: $('#off-canvas--menu--xxs').mercuryuiOffCanvas('open'); and $('#off-canvas--menu--xxs').mercuryuiOffCanvas('close');.

Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#off-canvas--menu--xxs').mercuryuiOffCanvas('open', { afterOpen: function(){ alert('Menu opened!'); } });

Note: Resize your browser to see off canvas menus in action at different breakpoints.

From Right To Left

Up To XXS

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--xxs margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xxs">Menu</button>
            <div class="off-canvas--menu" id="off-canvas--menu--xxs">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xxs">Close</button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
            </div>
        </nav>
    </div>
</header>

Up To XS

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--xs margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xs">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-xs">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xs">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
            </div>
        </nav>
    </div>
</header>

Up To SM

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--sm margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-sm">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-sm">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-sm">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
                <a href="#" class="off-canvas--link">Link Four</a>
                <a href="#" class="off-canvas--link">Link Five</a>
            </div>
        </nav>
    </div>
</header>

Up To MD

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--md margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-md">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-md">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-md">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
                <a href="#" class="off-canvas--link">Link Four</a>
                <a href="#" class="off-canvas--link">Link Five</a>
                <a href="#" class="off-canvas--link">Link Six</a>
            </div>
        </nav>
    </div>
</header>

Up To LG

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--lg margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-lg">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-lg">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-lg">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
                <a href="#" class="off-canvas--link">Link Four</a>
                <a href="#" class="off-canvas--link">Link Five</a>
                <a href="#" class="off-canvas--link">Link Six</a>
                <a href="#" class="off-canvas--link">Link Seven</a>
                <a href="#" class="off-canvas--link">Link Eight</a>
                <a href="#" class="off-canvas--link">Link Nine</a>
            </div>
        </nav>
    </div>
</header>

Up To XL

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--xl margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xl">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-xl">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xl">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
                <a href="#" class="off-canvas--link">Link Four</a>
                <a href="#" class="off-canvas--link">Link Five</a>
                <a href="#" class="off-canvas--link">Link Six</a>
                <a href="#" class="off-canvas--link">Link Seven</a>
                <a href="#" class="off-canvas--link">Link Eight</a>
                <a href="#" class="off-canvas--link">Link Nine</a>
                <a href="#" class="off-canvas--link">Link Ten</a>
            </div>
        </nav>
    </div>
</header>

Up To XXL

<header class="header style-guide--header">
    <div class="inner header--inner">
        <div class="logo">
            <a href="/" class="logo--link">
                <img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
            </a>
        </div>
        <nav class="off-canvas off-canvas--direction--right off-canvas--off--xxl margin--off">
            <button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xxl">
                Menu
            </button>
            <div class="off-canvas--menu" id="off-canvas--menu-right-xxl">
                <button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xxl">
                    Close
                </button>
                <a href="#" class="off-canvas--link">Link One</a>
                <a href="#" class="off-canvas--link">Link Two</a>
                <a href="#" class="off-canvas--link">Link Three</a>
                <a href="#" class="off-canvas--link">Link Four</a>
                <a href="#" class="off-canvas--link">Link Five</a>
                <a href="#" class="off-canvas--link">Link Six</a>
                <a href="#" class="off-canvas--link">Link Seven</a>
                <a href="#" class="off-canvas--link">Link Eight</a>
                <a href="#" class="off-canvas--link">Link Nine</a>
                <a href="#" class="off-canvas--link">Link Ten</a>
                <a href="#" class="off-canvas--link">Link Eleven</a>
                <a href="#" class="off-canvas--link">Link Twelve</a>
            </div>
        </nav>
    </div>
</header>

From Left To Right