Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christophery/pushy
Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
https://github.com/christophery/pushy
css jquery menu navigation off-canvas-menu submenu
Last synced: 29 days ago
JSON representation
Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
- Host: GitHub
- URL: https://github.com/christophery/pushy
- Owner: christophery
- License: other
- Created: 2013-05-21T02:26:48.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T14:55:25.000Z (5 months ago)
- Last Synced: 2024-10-09T14:06:11.822Z (about 1 month ago)
- Topics: css, jquery, menu, navigation, off-canvas-menu, submenu
- Language: HTML
- Homepage: https://chrisyee.ca/pushy
- Size: 352 KB
- Stars: 1,488
- Watchers: 58
- Forks: 214
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 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](https://medium.com/).
Pushy has been implemented on many sites, [check them out!](https://chrisyee.ca/pushy/#sites-using-pushy) Feel free to [contact me](https://chrisyee.ca/contact/) if you use Pushy in one of your websites.
Pushy has been featured on the [Treehouse Show](https://teamtreehouse.com/library/episode-118-page-transitions-designing-for-thumbs-concise?t=572) and in a [book](https://www.google.ca/books/edition/Responsive_Mobile_Design/guZjBAAAQBAJ?hl=en&gbpv=1&dq=christopheryee.ca/pushy&pg=PA103&printsec=frontcover)!
[View Demo](https://chrisyee.ca/pushy) | [Sites using Pushy](https://chrisyee.ca/pushy/#sites-using-pushy)
## 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.
- Auto-collapsible submenus.
- Left or right menu position.
- It's responsive!
## Requirements
- [jQuery 3.x+](https://jquery.com/)
## Install
Download the [latest release](https://github.com/christophery/pushy/releases), 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.
```html
☰ Menu
```
## Development
Pushy CSS and JS are compiled and minified using Grunt. You'll need [Node](https://nodejs.org/en/) and [Grunt](https://gruntjs.com/) 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](https://cdnjs.com/libraries/pushy).
## NPM
If your are comfortable with command line, you can install Pushy as a [NPM package](https://www.npmjs.com/package/@cmyee/pushy):
```
npm install @cmyee/pushy
```
## Options
### Menu Position
Use the ```.pushy-left``` or ```.pushy-right``` CSS class to specify the menu position.
```html
```
### 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.
```html
```
### 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`
```html
Menu
```
### 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.
```
```
## Tips
- Use the ```.push``` CSS class on HTML elements outside of the ```#container```.
```html
This is a Heading
This is a subheading
```
- If you are using SCSS, you can easily change the menu width by adjusting the ```$menu_width``` variable. The SCSS file [will need to be compiled](http://sass-lang.com/install) to CSS in order to see the change.
```css
$menu_width: 400px;
```
- Not using SCSS? You'll have to update the multiple values (or do a find a replace!) in the ```pushy.css``` file.
```css
.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 */
}
```
- Only links with the CSS class of ```pushy-link``` will close the menu.
```html
```
- 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.
```css
html, body{
overflow-x: hidden;
height: 100%;
-webkit-overflow-scrolling: touch;
}
```
## Browser Compatibility
| Desktop | Mobile |
| ------------- | -------------------------------------------|
| IE 9-11 | Chrome (Android) |
| MS Edge | Safari (iOS) |
| Chrome |
| Firefox |
| Safari (Mac) |
## Sites using Pushy
Pushy has been implemented on many sites in the wild, [check them out!](https://chrisyee.ca/pushy/#sites-using-pushy)
To add your site, [contact me](https://chrisyee.ca/contact/).