Pushy – Responsive Off-Canvas CSS Navigation Menu

Pushy is a responsive off-canvas css navigation menu created with css3 transforms & transitions. Pushy is created by Christopher Yee.

pushy-menu

Features

  • Responsive
  • Built with CSS Transitions and Transforms
  • jQuery animation fallback for IE7 – 9
  • Menu closes when a link is selected.
  • Menu closes when the site overlay is selected.

Usage

Notice: Pushy requires jQuery 1.9+ and Modernizr.

  1. Include jQuery & Modernizr.
  2. Add the stylesheet pushy.css in the document head
  3. Now add the JS pushy.min.js file before the closing body tag.

Use this markup:

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
    </ul>
</nav>

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

<!-- Your Content -->
<div id="container"></div>

Browser Support

Desktop

Mobile

  • Chrome (Android 4.2.2)
  • Android Browser (Android 4.2.2)
  • Safari (iOS 6 – 7)