Skip to content

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions

License

Notifications You must be signed in to change notification settings

CHEWX/pushy-left-right

 
 

Repository files navigation

#Pushy

Fork - This version supports both pushy left and pushy right.

Note - It's very rough around the edges, I will come back to it and clear it up, or you can send over a pull request.


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 let me know if you use Pushy in one of your websites.

View Demo | WordPress Theme

##Features

  • Uses CSS transforms & transitions.
  • Smooth performance on mobile devices.
  • jQuery animation fallback for IE 7 - 9.
  • Menu closes when a link is selected.
  • Menu closes when the site overlay is selected.
  • It's responsive!

##Requirements

##Install

Download the packaged source file, 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. Insert the following markup into your body.

<!-- 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">
    <!-- Menu Button -->
    <div class="menu-btn">&#9776; Menu</div>
</div>

##Bower

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

bower install pushy

##Tips

  • Use the .push CSS class on HTML elements outside of the #container.
<header class="push">
    <h1>This is a Heading</h1>
    <h2>This is a subheading</h2>
</header>

<!-- Your Content -->
<div id="container"></div>
  • If you change the width of the .pushy menu, be sure to update the values in the .pushy-leftand .container-push, .push-push CSS classes.
.pushy{
    width: 400px; /* Changed the width to 400px */
}

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

.container-push, .push-push{
    transform: translate3d(400px,0,0); /* Updated the values */
    /* Don't forget the vendor prefixes */
}
  • If you want to prevent scrolling of your site when Pushy is open just add overflow-x: hidden and height: 100% to both the html & body tags.
html, body{
    overflow-x: hidden;
    height: 100%;
}

##Browser Compatibility

Desktop Mobile
IE 9-11 Chrome (Android 4.x+)
Chrome Android Browser (Android 4.x+)
Firefox Safari (iOS 7)
Safari (Mac) Internet Explorer Mobile (Windows Phone 8)

##Version History

0.9.2

  • Removed modernizr dependency.
  • Updated site overlay with color + smoother transition.
  • Cleaned up the CSS a bit.
  • Dropped support for IE 7 & 8.

0.9.1

  • Added support for more menu items (with scroll bar).
  • Added the .push CSS class. This adds pushy support to additional HTML elements outside of the container div.
  • Fixed menu transition.
  • Tested in iOS 7.
  • Updated the demo file.

0.9.0

  • Added a site overlay when Pushy is toggled
  • Fixed horizonal scroll bar issue on mobile devices
  • Disabled webkit tap highlight
  • Rejiggered the JS file
  • Updated to jQuery 1.10.1
  • Updated the demo file

0.8.4

  • Fixed performance issue with mobile devices
  • Updated to jQuery 1.10
  • Updated the demo file
  • Updated the read me

##Sites using Pushy

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

Note: You may have to resize your browser on some sites to see Pushy in action.

To add your site, tweet to me @cmyee.

##Thanks to

About

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • ApacheConf 61.7%
  • JavaScript 16.9%
  • CSS 10.9%
  • HTML 10.5%