Skip to content

Latest commit

 

History

History
140 lines (99 loc) · 3.75 KB

README.md

File metadata and controls

140 lines (99 loc) · 3.75 KB
Raw

#Pushy

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

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

  • jQuery 1.9+
  • Modernizr (testing for CSS 3D Transforms)

##Usage

  1. Include jQuery & Modernizr.

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

  3. 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="pushy-cloak"></div>

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

##Modernizr

Pushy uses Modernizr to detect & test for CSS 3D Transforms support in the browser. Be sure to include this test in you are using the Modernizr build tool.

##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>
  • Add the following to hide horizontal scroll bars when menu is open, disable the webkit tap highlight and fix the focus scrolling in Safari.
html, body{
	overflow-x: hidden; /* prevents horizontal scroll bars */
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
	height: 100%; /* fixes focus scrolling in Safari (OS X) */
}
  • 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 */
}

##Browser Compatibility

Desktop Mobile
IE 7-10 Chrome (Android 4.2.2)
Chrome Android Browser (Android 4.2.2)
Firefox Safari (iOS 6-7)
Safari (Mac) Internet Explorer Mobile (Windows Phone 8)

##Version History

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

##Thanks to

Bitdeli Badge