{"id":13748311,"url":"https://github.com/christophery/pushy","last_synced_at":"2025-05-14T21:04:55.290Z","repository":{"id":8560468,"uuid":"10186258","full_name":"christophery/pushy","owner":"christophery","description":"Pushy is a responsive off-canvas navigation menu using CSS transforms \u0026 transitions.","archived":false,"fork":false,"pushed_at":"2024-06-17T14:55:25.000Z","size":360,"stargazers_count":1488,"open_issues_count":10,"forks_count":216,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-04-03T03:11:48.478Z","etag":null,"topics":["css","jquery","menu","navigation","off-canvas-menu","submenu"],"latest_commit_sha":null,"homepage":"https://chrisyee.ca/pushy","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christophery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-05-21T02:26:48.000Z","updated_at":"2025-03-26T13:55:29.000Z","dependencies_parsed_at":"2024-01-21T02:42:07.089Z","dependency_job_id":"6c693e72-cc47-4b32-be1b-df60cc45d5b9","html_url":"https://github.com/christophery/pushy","commit_stats":{"total_commits":200,"total_committers":7,"mean_commits":"28.571428571428573","dds":0.03500000000000003,"last_synced_commit":"88b957715e031b3f9aebf4e9d634d39333a5b2e7"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christophery%2Fpushy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christophery%2Fpushy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christophery%2Fpushy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christophery%2Fpushy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christophery","download_url":"https://codeload.github.com/christophery/pushy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247569113,"owners_count":20959760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","jquery","menu","navigation","off-canvas-menu","submenu"],"created_at":"2024-08-03T07:00:38.786Z","updated_at":"2025-05-14T21:04:55.236Z","avatar_url":"https://github.com/christophery.png","language":"HTML","readme":"# Pushy\n\nPushy is a responsive off-canvas navigation menu using CSS transforms \u0026 transitions. This project was inspired by the off-canvas navigation menu seen on [Medium](https://medium.com/).\n\nPushy 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.\n\nPushy has been featured on the [Treehouse Show](https://teamtreehouse.com/library/episode-118-page-transitions-designing-for-thumbs-concise?t=572), in a [book](https://www.google.ca/books/edition/Responsive_Mobile_Design/guZjBAAAQBAJ?hl=en\u0026gbpv=1\u0026dq=christopheryee.ca/pushy\u0026pg=PA103\u0026printsec=frontcover) and used in [Antarctica](https://www.antarctica.gov.au/)!\n\n[View Demo](https://chrisyee.ca/pushy) | [Sites using Pushy](https://chrisyee.ca/pushy/#sites-using-pushy)\n\n## Table of Contents\n\n1. [Features](#features)\n2. [Installation](#install)\n3. [Development](#development)\n4. [Options](#options)\n5. [Sites using Pushy](#sites-using-pushy)\n\n## Features\n\n- Uses CSS transforms \u0026 transitions\n- No jQuery dependency (as of version 2.0)\n- Smooth performance on mobile devices\n- Menu/submenu closes when a link is selected\n- Menu closes when the site overlay is selected\n- Works with a keyboard (ESC closes the menu)\n- Auto-collapsible submenus, nested to multiple levels\n- Left or right menu position\n- It's responsive!\n\n## Install\n\nDownload the [latest release](https://github.com/christophery/pushy/releases), this includes everything you need to get Pushy running on your site.\n\n1. Add the stylesheet (`pushy.css`) in your head and the JS (`pushy.min.js`) file in your footer.\n\n2. If you are using submenus, then you'll need to add the ```arrow.svg``` file into your `img` directory (optional).\n\n3. Insert the following markup into your body.\n\n```html\n\u003c!-- Pushy Menu --\u003e\n\u003cnav class=\"pushy pushy-left\" data-focus=\"#focus-link\"\u003e\n    \u003cdiv class=\"pushy-content\"\u003e\n        \u003cul\u003e\n            \u003cli class=\"pushy-submenu\"\u003e\n                \u003cbutton id=\"focus-link\"\u003eSubmenu\u003c/button\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#\"\u003eItem 3\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\n\n\u003c!-- Site Overlay --\u003e\n\u003cdiv class=\"site-overlay\"\u003e\u003c/div\u003e\n\n\u003c!-- Your Content --\u003e\n\u003cdiv class=\"container\"\u003e\n    \u003c!-- Menu Button --\u003e\n    \u003cbutton class=\"menu-btn\"\u003e\u0026#9776; Menu\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## CDN\n\nAlternatively link directly to Pushy files on [cdnjs](https://cdnjs.com/libraries/pushy).\n\n## NPM\n\nIf your are comfortable with command line, you can install Pushy as a [NPM package](https://www.npmjs.com/package/@cmyee/pushy):\n\n```\nnpm install @cmyee/pushy\n```\n\n## Development\nPushy CSS and JS are compiled and minified using Grunt. You'll need [Node](https://nodejs.org/en/) and [Grunt](https://gruntjs.com/) installed globally.\n\n**From the root directory run:**\n\n```\n$ npm install\n$ grunt\n```\n\nNow you can edit files in `/scss/` and `/js/`, which will be compiled to `/css/pushy.css` and `/js/pushy.min.js`.\n\n## Options\n\n### Menu Position\n\nUse the ```.pushy-left``` or ```.pushy-right``` CSS class to specify the menu position.\n\n```html\n\u003c!-- Pushy will transition from the right --\u003e\n\u003cnav class=\"pushy pushy-right\"\u003e\n    \u003cdiv class=\"pushy-content\"\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n### data-focus\n\nUse 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.\n\nThis data attribute accepts a CSS selector.\n\n```html\n\u003cnav class=\"pushy pushy-left\" data-focus=\"#focus-link\"\u003e\n    \u003cdiv class=\"pushy-content\"\u003e\n        \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\" id=\"focus-link\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eAbout Us\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/nav\u003e\n```\n\n### data-menu-btn-selector\n\nUse the `data-menu-btn-selector` attribute to change the menu button CSS class for toggling the menu.\n\nBy default Pushy will use `.menu-btn` to toggle the menu.\n\nThis data attribute accepts a CSS selector.\n\n**Note:** In v1.4.0 this attribute was renamed from `data-menu-btn-class` to `data-menu-btn-selector`\n\n```html\n\u003c!-- Pushy Menu --\u003e\n\u003cnav class=\"pushy pushy-left\" data-menu-btn-selector=\".my-menu-btn\"\u003e\n\t\u003c!-- I've removed the inner markup for brevity --\u003e\n\u003c/nav\u003e\n\n\u003c!-- Menu Button--\u003e\n\u003cbutton class=\"my-menu-btn\"\u003eMenu\u003c/button\u003e\n```\n\n## Tips\n\n- Use the ```.push``` CSS class on HTML elements outside of the ```.container```.\n\n```html\n\u003cheader class=\"push\"\u003e\n    \u003ch1\u003eThis is a Heading\u003c/h1\u003e\n    \u003ch2\u003eThis is a subheading\u003c/h2\u003e\n\u003c/header\u003e\n\n\u003c!-- Your Content --\u003e\n\u003cdiv class=\"container\"\u003e\u003c/div\u003e\n```\n\n- 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.\n\n```css\n$menu_width: 400px;\n\n```\n\n- Not using SCSS? You'll have to update the multiple values (or do a find a replace!) in the ```pushy.css``` file.\n\n```css\n\n.pushy{\n    width: 400px; /* Changed the width to 400px */\n}\n\n.pushy-left{\n    transform: translate3d(-400px,0,0); /* Updated the values */\n    /* Don't forget the vendor prefixes */\n}\n\n.pushy-open-left .container,\n.pushy-open-left .push {\n    transform: translate3d(400px, 0, 0); /* Updated the values */\n}\n\n.pushy-right {\n    transform: translate3d(400px, 0, 0); /* Updated the values */\n    /* Don't forget the vendor prefixes */\n}\n\n.pushy-open-right #.container,\n.pushy-open-right .push {\n    transform: translate3d(-400px, 0, 0); /* Updated the values */\n    /* Don't forget the vendor prefixes */\n}\n\n```\n\n- 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 \u0026 body tags.\n\n```css\nhtml, body{\n    overflow-x: hidden;\n    height: 100%;\n    -webkit-overflow-scrolling: touch;\n}\n```\n\n## Sites using Pushy\n\nPushy has been implemented on many sites in the wild, [check them out!](https://chrisyee.ca/pushy/#sites-using-pushy)\n\nTo add your site, [contact me](https://chrisyee.ca/contact/).","funding_links":[],"categories":["CSS","13. 页面交互"],"sub_categories":["13.7 侧滑插件(offcancas) ###","13.7 侧滑插件(offcancas)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristophery%2Fpushy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristophery%2Fpushy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristophery%2Fpushy/lists"}