Home

Awesome

Pushy

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This project was inspired by the off-canvas navigation menu seen on Medium.

Pushy has been implemented on many sites, check them out! Feel free to contact me if you use Pushy in one of your websites.

Pushy has been featured on the Treehouse Show and in a book!

View Demo | Sites using Pushy

Features

Requirements

Install

Download the latest release, this includes everything you need to get Pushy running on your site.

  1. Add the stylesheet (pushy.css) in your head and the JS (pushy.min.js) file in your footer.

  2. If you are using submenus, then you'll need to add the arrow.svg file into your img directory (optional).

  3. Insert the following markup into your body.

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <div class="pushy-content">
        <ul>
            <!-- Submenu -->
            <li class="pushy-submenu">
                <button>Submenu</button>
                <ul>
                    <li class="pushy-link"><a href="#">Item 1</a></li>
                    <li class="pushy-link"><a href="#">Item 2</a></li>
                    <li class="pushy-link"><a href="#">Item 3</a></li>
                </ul>
            </li>
            <li class="pushy-link"><a href="#">Item 1</a></li>
            <li class="pushy-link"><a href="#">Item 2</a></li>
        </ul>
    </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <button class="menu-btn">&#9776; Menu</button>
</div>

Development

Pushy CSS and JS are compiled and minified using Grunt. You'll need Node and Grunt installed globally.

From the root directory run:

$ npm install
$ grunt

Now you can edit files in /scss/ and /js/, which will be compiled to /css/pushy.css and /js/pushy.min.js automatically.

CDN

Link directly to Pushy files on cdnjs.

NPM

If your are comfortable with command line, you can install Pushy as a NPM package:

npm install @cmyee/pushy

Options

Menu Position

Use the .pushy-left or .pushy-right CSS class to specify the menu position.

<!-- Pushy will transition from the right -->
<nav class="pushy pushy-right">
    <div class="pushy-content">
        <ul>
            <li class="pushy-link"><a href="#">Item 1</a></li>
            <li class="pushy-link"><a href="#">Item 2</a></li>
        </ul>
    </div>
</nav>

data-focus

Use the data-focus attribute to give focus to a link when the menu is opened. Ideally the first link of the menu should be focused.

This data attribute accepts a CSS selector.

<nav class="pushy pushy-left" data-focus="#first-link">
    <div class="pushy-content">
        <ul>
            <li id="first-link" class="pushy-link"><a href="#">Home</a></li>
            <li class="pushy-link"><a href="#">About Us</a></li>
            <li class="pushy-link"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

data-menu-btn-selector

Use the data-menu-btn-selector attribute to change the menu button CSS class for toggling the menu.

By default Pushy will use .menu-btn to toggle the menu.

This data attribute accepts a CSS selector.

Note: In v1.4.0 this attribute was renamed from data-menu-btn-class to data-menu-btn-selector

<!-- Pushy Menu -->
<nav class="pushy pushy-left" data-menu-btn-selector=".my-menu-btn">
	<!-- I've removed the inner markup for brevity -->
</nav>

<!-- Menu Button-->
<button class="my-menu-btn">Menu</button>

data-container-selector

Use the data-container-selector attribute to using a custom #container selector.

If you use a custom #container selector you'll need to update the necessary CSS in pushy.scss.

This data attribute accepts a CSS selector.

<nav class="pushy pushy-right" data-container-selector="#custom-container">

Tips

<header class="push">
    <h1>This is a Heading</h1>
    <h2>This is a subheading</h2>
</header>

<!-- Your Content -->
<div id="container"></div>
$menu_width: 400px;


.pushy{
    width: 400px; /* Changed the width to 400px */
}

.pushy-left{
    transform: translate3d(-400px,0,0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}

.pushy-open-left #container,
.pushy-open-left .push {
    transform: translate3d(400px, 0, 0); /* Updated the values */
}

.pushy-right {
    transform: translate3d(400px, 0, 0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}

.pushy-open-right #container,
.pushy-open-right .push {
    transform: translate3d(-400px, 0, 0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}

<nav class="pushy pushy-left">
    <div class="pushy-content">
        <ul>
            <!-- This link will close the menu -->
            <li class="pushy-link"><a href="#">Item 1</a></li>
            <!-- This link won't close the menu -->
            <li><a href="#">Item 2</a></li>
        </ul>
    </div>
</nav>
html, body{
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

Browser Compatibility

DesktopMobile
IE 9-11Chrome (Android)
MS EdgeSafari (iOS)
Chrome
Firefox
Safari (Mac)

Sites using Pushy

Pushy has been implemented on many sites in the wild, check them out!

To add your site, contact me.