{"id":21192970,"url":"https://github.com/cloudfour/offcanvasmenu","last_synced_at":"2025-10-19T15:33:05.167Z","repository":{"id":7843173,"uuid":"9214831","full_name":"cloudfour/offCanvasMenu","owner":"cloudfour","description":"A jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.","archived":false,"fork":false,"pushed_at":"2013-10-23T23:18:40.000Z","size":466,"stargazers_count":140,"open_issues_count":6,"forks_count":23,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-11-11T05:09:38.724Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudfour.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-04T09:22:53.000Z","updated_at":"2024-11-08T02:24:54.000Z","dependencies_parsed_at":"2022-08-31T00:00:52.708Z","dependency_job_id":null,"html_url":"https://github.com/cloudfour/offCanvasMenu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2FoffCanvasMenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2FoffCanvasMenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2FoffCanvasMenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudfour%2FoffCanvasMenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudfour","download_url":"https://codeload.github.com/cloudfour/offCanvasMenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225615197,"owners_count":17496946,"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":[],"created_at":"2024-11-20T19:12:16.434Z","updated_at":"2025-10-19T15:33:00.126Z","avatar_url":"https://github.com/cloudfour.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# offCanvasMenu\n\n**offCanvasMenu** is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.\n\nWhen activated, offCanvasMenu \"slides\" the menu element into view, \"pushing\" other content to the side.\n\n## Setup\n\n### 1. Include jQuery (or Zepto)\n\nOur example comes with jQuery 1.9.1 (but 2.0.0 should work as well).\n\n    \u003cscript src=\"lib/jquery-2.0.0.min.js\"\u003e\u003c/script\u003e\n\nIf you'd prefer, you can use [Zepto](http://zeptojs.com/) instead.\n\n    \u003cscript src=\"lib/zepto-1.0.min.js\"\u003e\u003c/script\u003e\n\n### 2. Include Modernizr (Optional)\n\nIf you're using jQuery but want CSS transitions (Super swank! So much prettier!), you'll need Modernizr. Our example comes with a custom build that only contains the tests needed.\n\n    \u003cscript src=\"lib/modernizr.custom.js\"\u003e\u003c/script\u003e\n\nYou can check out our [Modernizr build details](http://modernizr.com/download/#-csstransforms-csstransitions-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes).\n\n**Needed tests** (if you want to add to an existing Modernizr build):\n\n* `csstransforms`\n* `csstransitions`\n\n*Note*: Modernizr is optional (and not at all necessary if you're using Zepto). If you don't include it, the plugin will fall back to JS animations.\n\n### 3. Include the plugin\n\n    \u003cscript src=\"lib/jquery.offcanvasmenu.js\"\u003e\u003c/script\u003e\n\n### 4. Initialize your menu!\n\n    $.offCanvasMenu();\n\n#### Options\n\n    $.offCanvasMenu({\n      direction : 'left',\n      coverage  : '70%',\n      trigger   : '#menu-trigger',\n      menu      : '#menu',\n      duration  : 250,\n      container : 'body',\n      classes   : {\n        inner    : 'inner-wrapper',\n        outer    : 'outer-wrapper',\n        container: 'off-canvas-menu',\n        open     : 'menu-open'\n      },\n      transEndEventNames: {\n        'WebkitTransition' : 'webkitTransitionEnd',\n        'MozTransition'    : 'transitionend',\n        'OTransition'      : 'oTransitionEnd otransitionend',\n        'msTransition'     : 'MSTransitionEnd',\n        'transition'       : 'transitionend'\n      }\n    });\n\n#### Options you may wish to change\n\n* `direction`: (string) Direction from which the menu enters the containing element. Valid values are `left` or `right`. Default `left`.\n* `coverage`: (string) Width (in CSS units) of the menu when it is open/active. Relative units are relative to the `container` element. In all but the most experimental cases this is the `body` element, which means this effectively translates to coverage of the visible viewport. `px` or other non-percentage units are OK, but you must include the unit. Default is `70%`. We haven't tested with much variation to that!\n* `trigger`: jQuery selector for the element that should trigger the show/hide of the menu. Default `#menu-trigger`.\n* `menu`: jQuery selector for the menu element itself. Default `#menu`.\n\n#### Other options\n\nFor the most part, you'll want to leave these alone; they're there in case you run into namespace conflicts in CSS or other deeper issues.\n\n* `duration`: The time the animation should take to complete in milliseconds.\n* `container`: Nominally it should be possible to use a different container element other than the `body` element that is the default. But we haven't tried it!\n* `classes` : The class names that get assigned to different elements needed to make the menu work. You can change these if you have a conflict or other burning desire for change.\n* `transEndEventNames`: When CSS transitions are used we attach some events to the `transitionend` callback, which can differ in name browser-to-browser. We use a method similar to [Modernizr](http://modernizr.com/docs/#prefixed) and [Twitter Bootstrap](https://github.com/twitter/bootstrap/blob/master/js/bootstrap-transition.js) for determining the event name, referencing the keys in this list.\n\n### 5. Functions\n\n* `on()`: You'll usually run this function right after initializing the menu. It causes the menu to be moved off-canvas and enables toggle(), show(), and hide().\n* `off()`: This function causes the menu to move to its original position and disables toggle(), show(), and hide().\n* `toggle()`: Toggles the menu.\n* `show()`: Shows the menu.\n* `hide()`: Hides the menu.\n\n## Known Issues\n\n### Android animation bugs\n\nSome versions of the Android browser handle percentage transforms [rather strangely](http://css-tricks.com/forums/discussion/20269/transform-translate-percentages-and-android/p1). Specifying a non-percentage value for `coverage` should alleviate the issue.\n\n## License\n\nReleased under the [MIT License](http://www.opensource.org/licenses/MIT).\n\nThis repository contains other libraries that may or may not fall under the same license:\n\n* [FastClick](https://github.com/ftlabs/fastclick)\n* [jQuery](https://github.com/jquery/jquery)\n* [jQuery csswatch](https://github.com/leifcr/jquery-csswatch/)\n* [Modernizr](https://github.com/Modernizr/Modernizr)\n* [Zepto](https://github.com/madrobby/zepto)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Foffcanvasmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudfour%2Foffcanvasmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudfour%2Foffcanvasmenu/lists"}