{"id":13760458,"url":"https://github.com/mango/slideout","last_synced_at":"2025-05-13T19:02:50.957Z","repository":{"id":26708509,"uuid":"30165704","full_name":"Mango/slideout","owner":"Mango","description":"A touch slideout navigation menu for your mobile web apps.","archived":false,"fork":false,"pushed_at":"2020-09-20T04:51:22.000Z","size":5976,"stargazers_count":7925,"open_issues_count":72,"forks_count":1149,"subscribers_count":222,"default_branch":"master","last_synced_at":"2025-04-27T08:36:56.299Z","etag":null,"topics":["menu-navigation","offcanvas","sidebar","slideout-menu","touch-events"],"latest_commit_sha":null,"homepage":"https://slideout.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mango.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-02T01:05:43.000Z","updated_at":"2025-04-16T01:07:20.000Z","dependencies_parsed_at":"2022-07-12T16:08:41.308Z","dependency_job_id":null,"html_url":"https://github.com/Mango/slideout","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mango%2Fslideout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mango%2Fslideout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mango%2Fslideout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mango%2Fslideout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mango","download_url":"https://codeload.github.com/Mango/slideout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010792,"owners_count":21998993,"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":["menu-navigation","offcanvas","sidebar","slideout-menu","touch-events"],"created_at":"2024-08-03T13:01:10.676Z","updated_at":"2025-05-13T19:02:50.900Z","avatar_url":"https://github.com/Mango.png","language":"JavaScript","readme":"# Slideout.js\n\n[![NPM version][npm-image]][npm-link] [![License][lic-image]][npm-link] [![Build status][travis-image]][travis-link] [![Coverage Status][coverage-image]][coverage-link] [![Dependency status][deps-image]][deps-link] [![devDependency status][devdeps-image]][devdeps-link] [![downloads][dt-image]][npm-link]\n\n\u003e A touch slideout navigation menu for your mobile web apps.\n\n## Features\n\n- Dependency-free.\n- Simple markup.\n- Native scrolling.\n- Easy customization.\n- CSS transforms \u0026 transitions.\n- Just 2 Kb! (min \u0026 gzip)\n\n## Demo\n\n[Check out the demo](https://mango.github.io/slideout/) to see it in action (on your mobile or emulate touches on your browser).\n\n\u003cimg src=\"https://i.imgur.com/AWgwlVW.gif\" alt=\"Slideout.js demo\"\u003e\n\n## Installation\n\nSlideout is available on cdnjs\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js\"\u003e\u003c/script\u003e\n```\n\nAlso you can use one of many package managers\n\n    $ npm install slideout\n\n    $ spm install slideout\n\n    $ bower install slideout.js\n\n    $ component install mango/slideout\n\n## Usage\n\nImplementing Slideout.js into your project is easy.\n\nFirst of all, you'll need to create your markup. You should have a menu (`#menu`) and a main content (`#panel`) into your body.\n\n```html\n\u003cnav id=\"menu\"\u003e\n  \u003cheader\u003e\n    \u003ch2\u003eMenu\u003c/h2\u003e\n  \u003c/header\u003e\n\u003c/nav\u003e\n\n\u003cmain id=\"panel\"\u003e\n  \u003cheader\u003e\n    \u003ch2\u003ePanel\u003c/h2\u003e\n  \u003c/header\u003e\n\u003c/main\u003e\n```\n\nAdd the Slideout.js styles (index.css) in your web application.\n\n```css\nbody {\n  width: 100%;\n  height: 100%;\n}\n\n.slideout-menu {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 256px;\n  min-height: 100vh;\n  overflow-y: scroll;\n  -webkit-overflow-scrolling: touch;\n  z-index: 0;\n  display: none;\n}\n\n.slideout-menu-left {\n  left: 0;\n}\n\n.slideout-menu-right {\n  right: 0;\n}\n\n.slideout-panel {\n  position: relative;\n  z-index: 1;\n  will-change: transform;\n  background-color: #FFF; /* A background-color is required */\n  min-height: 100vh;\n}\n\n.slideout-open,\n.slideout-open body,\n.slideout-open .slideout-panel {\n  overflow: hidden;\n}\n\n.slideout-open .slideout-menu {\n  display: block;\n}\n```\n\nThen you just include Slideout.js, create a new instance with some options and call the toggle method:\n\n```html\n\u003cscript src=\"dist/slideout.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var slideout = new Slideout({\n    'panel': document.getElementById('panel'),\n    'menu': document.getElementById('menu'),\n    'padding': 256,\n    'tolerance': 70\n  });\n\n  // Toggle button\n  document.querySelector('.toggle-button').addEventListener('click', function() {\n    slideout.toggle();\n  });\n\u003c/script\u003e\n```\n\n#### Full example\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003eSlideout Demo\u003c/title\u003e\n    \u003cmeta http-equiv=\"cleartype\" content=\"on\"\u003e\n    \u003cmeta name=\"MobileOptimized\" content=\"320\"\u003e\n    \u003cmeta name=\"HandheldFriendly\" content=\"True\"\u003e\n    \u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n    \u003cstyle\u003e\n      body {\n        width: 100%;\n        height: 100%;\n      }\n\n      .slideout-menu {\n        position: fixed;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        right: 0;\n        z-index: 0;\n        width: 256px;\n        overflow-y: scroll;\n        -webkit-overflow-scrolling: touch;\n        display: none;\n      }\n\n      .slideout-panel {\n        position: relative;\n        z-index: 1;\n        will-change: transform;\n      }\n\n      .slideout-open,\n      .slideout-open body,\n      .slideout-open .slideout-panel {\n        overflow: hidden;\n      }\n\n      .slideout-open .slideout-menu {\n        display: block;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003cnav id=\"menu\"\u003e\n      \u003ch2\u003eMenu\u003c/h2\u003e\n    \u003c/nav\u003e\n\n    \u003cmain id=\"panel\"\u003e\n      \u003cheader\u003e\n        \u003cbutton class=\"toggle-button\"\u003e☰\u003c/button\u003e\n        \u003ch2\u003ePanel\u003c/h2\u003e\n      \u003c/header\u003e\n    \u003c/main\u003e\n\n    \u003cscript src=\"dist/slideout.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      var slideout = new Slideout({\n        'panel': document.getElementById('panel'),\n        'menu': document.getElementById('menu'),\n        'padding': 256,\n        'tolerance': 70\n      });\n\n      // Toggle button\n      document.querySelector('.toggle-button').addEventListener('click', function() {\n        slideout.toggle();\n      });\n    \u003c/script\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Browser Support\n\n- Chrome (IOS, Android, desktop)\n- Firefox (Android, desktop)\n- Safari (IOS, Android, desktop)\n- Opera (desktop)\n- IE 10+ (desktop and mobile)\n\n## API\n\n### Slideout(options)\nCreate a new instance of `Slideout`.\n\n- `options` (Object) - Options to customize a new instance of Slideout.\n- `options.panel` (HTMLElement) - The DOM element that contains all your application content (`.slideout-panel`).\n- `options.menu` (HTMLElement) - The DOM element that contains your menu application (`.slideout-menu`).\n- `[options.duration]` (Number) - The time (milliseconds) to open/close the slideout. Default: `300`.\n- `[options.easing]` (String) - The CSS effect to use when animating the opening and closing of the slideout. Default: `ease`. Possible values:\n    - `ease`\n    - `linear`\n    - `ease-in`\n    - `ease-out`\n    - `ease-in-out`\n    - `step-start`\n    - `step-end`\n    - [`cubic-bezier`](http://cubic-bezier.com/)\n- `[options.padding]` (Number) - Default: `256`.\n- `[options.tolerance]` (Number) - The number of `px` needed for the menu can be opened completely, otherwise it closes. Default: `70`.\n- `[options.touch]` (Boolean) - Set this option to false to disable Slideout touch events. Default: `true`.\n- `[options.side]` (String) - The side to open the slideout (`left` or `right`). Default: `left`.\n\n```js\nvar slideout = new Slideout({\n  'panel': document.getElementById('main'),\n  'menu': document.getElementById('menu'),\n  'padding': 256,\n  'tolerance': 70,\n  'easing': 'cubic-bezier(.32,2,.55,.27)'\n});\n```\n\n### Slideout.open();\nOpens the slideout menu. It emits `beforeopen` and `open` events.\n\n```js\nslideout.open();\n```\n\n### Slideout.close();\nCloses the slideout menu. It emits `beforeclose` and `close` events.\n\n```js\nslideout.close();\n```\n\n### Slideout.toggle();\nToggles (open/close) the slideout menu.\n\n```js\nslideout.toggle();\n```\n\n### Slideout.isOpen();\nReturns `true` if the slideout is currently open, and `false` if it is closed.\n\n```js\nslideout.isOpen(); // true or false\n```\n\n### Slideout.destroy();\nCleans up the instance so another slideout can be created on the same area.\n\n```js\nslideout.destroy();\n```\n\n### Slideout.enableTouch();\nEnables opening the slideout via touch events.\n\n```js\nslideout.enableTouch();\n```\n\n### Slideout.disableTouch();\nDisables opening the slideout via touch events.\n\n```js\nslideout.disableTouch();\n```\n\n### Slideout.on(event, listener);\n```js\nslideout.on('open', function() { ... });\n```\n\n### Slideout.once(event, listener);\n```js\nslideout.once('open', function() { ... });\n```\n\n### Slideout.off(event, listener);\n```js\nslideout.off('open', listener);\n```\n\n### Slideout.emit(event, ...data);\n```js\nslideout.emit('open');\n```\n\n## Events\n\nAn instance of Slideout emits the following events:\n\n- `beforeclose`\n- `close`\n- `beforeopen`\n- `open`\n- `translatestart`\n- `translate`\n- `translateend`\n\nThe slideout emits `translatestart`, `translate` and `translateend` events only when it is opening/closing via touch events.\n\n```js\nslideout.on('translatestart', function() {\n  console.log('Start');\n});\n\nslideout.on('translate', function(translated) {\n  console.log('Translate: ' + translated); // 120 in px\n});\n\nslideout.on('translateend', function() {\n  console.log('End');\n});\n\n// 'Start'\n// 'Translate 120'\n// 'End'\n```\n\n## `data-slideout-ignore` attribute\nYou can use the special HTML attribute `data-slideout-ignore` to disable dragging on some elements. For example, if you have to prevent `slideout` will open when touch on carousels, maps, iframes, etc.\n\n```html\n\u003cmain id=\"panel\"\u003e\n  \u003cheader\u003e\n    \u003ch2\u003ePanel\u003c/h2\u003e\n  \u003c/header\u003e\n  \u003cdiv id=\"carousel\" data-slideout-ignore\u003e\n    \u003ch2\u003eCarousel\u003c/h2\u003e\n    ...\n  \u003c/div\u003e\n\u003c/main\u003e\n```\n\n## npm-scripts\n```\n$ npm run build\n```\n\n```\n$ npm run dist\n```\n\n```\n$ npm test\n```\n\n```\n$ npm run hint\n```\n\n## FAQ\n\n### How to add a toggle button.\n\n```js\n// vanilla js\ndocument.querySelector('.toggle-button').addEventListener('click', function() {\n  slideout.toggle();\n});\n\n// jQuery\n$('.toggle-button').on('click', function() {\n    slideout.toggle();\n});\n```\n\n### How to open slideout from right side.\n\nYou should use the `side` option with the value `right`.\n```js\nvar slideout = new Slideout({\n  'panel': document.getElementById('content'),\n  'menu': document.getElementById('menu'),\n  'side': 'right'\n});\n```\n\n### How to enable slideout only on mobile devices.\n\nYou should use `mediaqueries`:\n```css\n@media screen and (min-width: 780px) {\n  .slideout-panel {\n    margin-left: 256px;\n  }\n\n  .slideout-menu {\n    display: block;\n  }\n\n  .btn-hamburger {\n    display: none;\n  }\n}\n```\nDemo: http://codepen.io/pazguille/pen/mEdQvX\n\n### How to use slideout with a fixed header.\n\nFirst, you should define the styles for your fixed header:\n```css\n.fixed-header {\n  position: fixed;\n  width: 100%;\n  height: 50px;\n  backface-visibility: hidden;\n  z-index: 2;\n  background-color: red;\n}\n```\n\nThen, using slideout's events you should translate the fixed header:\n```js\nvar fixed = document.querySelector('.fixed-header');\n\nslideout.on('translate', function(translated) {\n  fixed.style.transform = 'translateX(' + translated + 'px)';\n});\n\nslideout.on('beforeopen', function () {\n  fixed.style.transition = 'transform 300ms ease';\n  fixed.style.transform = 'translateX(256px)';\n});\n\nslideout.on('beforeclose', function () {\n  fixed.style.transition = 'transform 300ms ease';\n  fixed.style.transform = 'translateX(0px)';\n});\n\nslideout.on('open', function () {\n  fixed.style.transition = '';\n});\n\nslideout.on('close', function () {\n  fixed.style.transition = '';\n});\n```\n\nDemo: http://codepen.io/pazguille/pen/ZBxdgw\n\n\n### How to disable dragging on some elements.\nYou can use the attribute `data-slideout-ignore` to disable dragging on some elements:\n\n```html\n\u003cnav id=\"menu\"\u003e\n  \u003cheader\u003e\n    \u003ch2\u003eMenu\u003c/h2\u003e\n  \u003c/header\u003e\n\u003c/nav\u003e\n\n\u003cmain id=\"panel\"\u003e\n  \u003cheader\u003e\n    \u003ch2\u003ePanel\u003c/h2\u003e\n  \u003c/header\u003e\n  \u003cdiv id=\"carousel\" data-slideout-ignore\u003e\n    \u003ch2\u003eCarousel\u003c/h2\u003e\n    ...\n  \u003c/div\u003e\n\u003c/main\u003e\n```\n\n### How to add an overlay to close the menu on click.\nYou can do that using the powerful `slideout` API and a little extra CSS:\n\n```css\n.panel:before {\n  content: '';\n  display: block;\n  background-color: rgba(0,0,0,0);\n  transition: background-color 0.5s ease-in-out;\n}\n\n.panel-open:before {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  background-color: rgba(0,0,0,.5);\n  z-index: 99;\n}\n```\n\n```js\nfunction close(eve) {\n  eve.preventDefault();\n  slideout.close();\n}\n\nslideout\n  .on('beforeopen', function() {\n    this.panel.classList.add('panel-open');\n  })\n  .on('open', function() {\n    this.panel.addEventListener('click', close);\n  })\n  .on('beforeclose', function() {\n    this.panel.classList.remove('panel-open');\n    this.panel.removeEventListener('click', close);\n  });\n```\n\nDemo: http://codepen.io/pazguille/pen/BQYRYK\n\n## With :heart: by\n- Guille Paz (Front-end developer | Web standards lover)\n- E-mail: [guille87paz@gmail.com](mailto:guille87paz@gmail.com)\n- Twitter: [@pazguille](http://twitter.com/pazguille)\n- Web: [http://pazguille.me](http://pazguille.me)\n\n## License\nMIT license. Copyright © 2015 [Mango](http://getmango.com).\n\n[npm-image]: https://img.shields.io/npm/v/slideout.svg\n[lic-image]: https://img.shields.io/npm/l/slideout.svg\n[npm-link]: https://npmjs.org/package/slideout\n[travis-image]: https://img.shields.io/travis/Mango/slideout.svg\n[travis-link]: https://travis-ci.org/Mango/slideout\n[deps-image]: https://img.shields.io/david/mango/slideout.svg\n[deps-link]: https://david-dm.org/mango/slideout\n[devdeps-image]: https://img.shields.io/david/dev/mango/slideout.svg\n[devdeps-link]: https://david-dm.org/mango/slideout#info=devDependencies\n[dt-image]: https://img.shields.io/npm/dt/slideout.svg\n[coverage-image]: https://img.shields.io/coveralls/Mango/slideout.svg\n[coverage-link]: https://coveralls.io/github/Mango/slideout\n","funding_links":[],"categories":["Menu","Menu [🔝](#readme)","UI","13. 页面交互","菜单","Uncategorized"],"sub_categories":["Other","其它","13.7 侧滑插件(offcancas) ###","13.7 侧滑插件(offcancas)","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmango%2Fslideout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmango%2Fslideout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmango%2Fslideout/lists"}