Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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/).