{"id":24960921,"url":"https://github.com/yohn/picocss-offcanvas","last_synced_at":"2026-02-25T01:36:34.625Z","repository":{"id":274100033,"uuid":"921911667","full_name":"Yohn/PicoCSS-OffCanvas","owner":"Yohn","description":"Check out the demo!","archived":false,"fork":false,"pushed_at":"2025-01-24T21:32:22.000Z","size":13,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-30T15:04:47.286Z","etag":null,"topics":["offcanvas","offcanvas-menu","picocss","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://yohn.github.io/PicoCSS-OffCanvas/","language":"HTML","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/Yohn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2025-01-24T21:17:59.000Z","updated_at":"2025-10-03T17:26:10.000Z","dependencies_parsed_at":"2025-01-24T22:32:51.832Z","dependency_job_id":null,"html_url":"https://github.com/Yohn/PicoCSS-OffCanvas","commit_stats":null,"previous_names":["yohn/picocss-offcanvas"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Yohn/PicoCSS-OffCanvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yohn%2FPicoCSS-OffCanvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yohn%2FPicoCSS-OffCanvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yohn%2FPicoCSS-OffCanvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yohn%2FPicoCSS-OffCanvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yohn","download_url":"https://codeload.github.com/Yohn/PicoCSS-OffCanvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yohn%2FPicoCSS-OffCanvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29808003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T22:43:48.403Z","status":"ssl_error","status_checked_at":"2026-02-24T22:43:18.536Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["offcanvas","offcanvas-menu","picocss","vanilla-javascript","vanilla-js"],"created_at":"2025-02-03T08:32:41.322Z","updated_at":"2026-02-25T01:36:34.609Z","avatar_url":"https://github.com/Yohn.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Offcanvas Component\n\nAn accessible, responsive, and customizable offcanvas component built using SCSS, HTML, and Vanilla JavaScript. The component is designed to work seamlessly on all modern browsers and devices, offering flexible configuration through data attributes and JavaScript.\n\n---\n\n## Features\n- Configurable sliding directions (`top`, `left`, `bottom`, `right`).\n- Content loading from a URL or inline source.\n- Push or overlay page content.\n- Optional backdrop.\n- Configurable scroll behavior for the main page.\n- Closeable via backdrop clicks or buttons.\n- Easily customizable animations.\n- Events for opening, loading content, and closing.\n- Support for multiple offcanvas instances.\n- Can slide into specific containers instead of the entire body.\n\n---\n\n## Installation\nInclude the PicoCSS stylesheet and your custom JavaScript and SCSS:\n\n### PicoCSS CDN:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.8/css/pico.lime.css\"\u003e\n```\n\n### Custom Files:\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/offcanvas.css\"\u003e\n\u003cscript src=\"path/to/offcanvas.js\" defer\u003e\u003c/script\u003e\n```\n\n---\n\n## HTML Structure\nEach offcanvas requires a trigger button and a corresponding target container:\n\n### Example:\n```html\n\u003cbutton class=\"offcanvas-trigger\" data-offcanvas-target=\"#offcanvas-1\" data-offcanvas-options='{\"direction\": \"left\", \"backdrop\": true}'\u003e\n\tOpen Offcanvas\n\u003c/button\u003e\n\n\u003cdiv id=\"offcanvas-1\" class=\"offcanvas\"\u003e\n\t\u003cbutton class=\"offcanvas-close\"\u003eClose\u003c/button\u003e\n\t\u003cdiv class=\"offcanvas-content\"\u003e\n\t\t\u003cp\u003eOffcanvas Content\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n## Configuration\nThe component can be configured via:\n- **Data Attributes**\n- **JavaScript Options**\n\n### Data Attributes\n#### `data-offcanvas-target` (required):\nSpecifies the target offcanvas element to open.\n- **Value:** CSS selector of the target element.\n\n#### `data-offcanvas-options` (optional):\nJSON string to define offcanvas options.\n\n### JavaScript Options\nOptions can also be passed programmatically when initializing the `Offcanvas` class.\n\n```javascript\nconst offcanvas = new Offcanvas(trigger, {\n\tdirection: 'left',\n\tpush: true,\n\tbackdrop: true,\n\tscroll: false,\n\tanimation: 'slide-in',\n\tcontainer: 'body',\n});\noffcanvas.init();\n```\n\n---\n\n## Options\nThe following options are available:\n\n| Option         | Type      | Default   | Description                                                                 |\n|----------------|-----------|-----------|-----------------------------------------------------------------------------|\n| `direction`    | `string`  | `right`   | The direction from which the offcanvas appears (`top`, `left`, `bottom`, `right`). |\n| `push`         | `boolean` | `false`   | Whether the offcanvas pushes or overlays the page content.                 |\n| `backdrop`     | `boolean` | `true`    | Whether to display a backdrop when the offcanvas is open.                  |\n| `scroll`       | `boolean` | `false`   | Whether the page remains scrollable when the offcanvas is open.            |\n| `animation`    | `string`  | `slide-in`| Animation class for showing/hiding the offcanvas.                          |\n| `container`    | `string`  | `body`    | Selector for the container element into which the offcanvas slides.        |\n\n---\n\n## Methods\nThe `Offcanvas` class provides the following methods:\n\n### `init()`\nInitializes the offcanvas component by adding event listeners.\n\n### `open()`\nOpens the offcanvas.\n\n### `close()`\nCloses the offcanvas.\n\n### Example:\n```javascript\nconst trigger = document.querySelector('.offcanvas-trigger');\nconst offcanvas = new Offcanvas(trigger, { direction: 'top' });\noffcanvas.init();\noffcanvas.open();\noffcanvas.close();\n```\n\n---\n\n## Events\nThe component triggers the following custom events:\n\n| Event              | Description                                               |\n|--------------------|-----------------------------------------------------------|\n| `offcanvas:open`   | Triggered when the offcanvas is opened.                   |\n| `offcanvas:close`  | Triggered when the offcanvas is closed.                   |\n| `offcanvas:loaded` | Triggered when the offcanvas content is loaded via a URL. |\n\n### Example:\n```javascript\nconst offcanvas = new Offcanvas(trigger);\noffcanvas.init();\n\noffcanvas.target.addEventListener('offcanvas:open', () =\u003e {\n\tconsole.log('Offcanvas opened');\n});\n\noffcanvas.target.addEventListener('offcanvas:close', () =\u003e {\n\tconsole.log('Offcanvas closed');\n});\n```\n\n---\n\n## Styling\nDefault dimensions for the offcanvas can be customized via SCSS variables.\n\n### Default Dimensions:\n```scss\n.offcanvas {\n\twidth: 20rem; // For left and right directions\n\theight: 20rem; // For top and bottom directions\n}\n```\n\nTo customize animations or dimensions, override the SCSS variables or write additional styles.\n\n---\n\n## Examples\n### Multiple Offcanvas Buttons:\n```html\n\u003cbutton class=\"offcanvas-trigger\" data-offcanvas-target=\"#offcanvas-1\" data-offcanvas-options='{\"direction\": \"left\"}'\u003eOpen Left\u003c/button\u003e\n\u003cbutton class=\"offcanvas-trigger\" data-offcanvas-target=\"#offcanvas-2\" data-offcanvas-options='{\"direction\": \"right\"}'\u003eOpen Right\u003c/button\u003e\n\u003cbutton class=\"offcanvas-trigger\" data-offcanvas-target=\"#offcanvas-3\" data-offcanvas-options='{\"direction\": \"top\"}'\u003eOpen Top\u003c/button\u003e\n\u003cbutton class=\"offcanvas-trigger\" data-offcanvas-target=\"#offcanvas-4\" data-offcanvas-options='{\"direction\": \"bottom\"}'\u003eOpen Bottom\u003c/button\u003e\n\n\u003cdiv id=\"offcanvas-1\" class=\"offcanvas\"\u003e\u003cbutton class=\"offcanvas-close\"\u003eClose\u003c/button\u003e\u003c/div\u003e\n\u003cdiv id=\"offcanvas-2\" class=\"offcanvas\"\u003e\u003cbutton class=\"offcanvas-close\"\u003eClose\u003c/button\u003e\u003c/div\u003e\n\u003cdiv id=\"offcanvas-3\" class=\"offcanvas\"\u003e\u003cbutton class=\"offcanvas-close\"\u003eClose\u003c/button\u003e\u003c/div\u003e\n\u003cdiv id=\"offcanvas-4\" class=\"offcanvas\"\u003e\u003cbutton class=\"offcanvas-close\"\u003eClose\u003c/button\u003e\u003c/div\u003e\n```\n\n---\n\n## License\nThis offcanvas component is provided under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyohn%2Fpicocss-offcanvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyohn%2Fpicocss-offcanvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyohn%2Fpicocss-offcanvas/lists"}