Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yohn/picocss-offcanvas
Check out the demo!
https://github.com/yohn/picocss-offcanvas
offcanvas offcanvas-menu picocss vanilla-javascript vanilla-js
Last synced: 6 days ago
JSON representation
Check out the demo!
- Host: GitHub
- URL: https://github.com/yohn/picocss-offcanvas
- Owner: Yohn
- License: mit
- Created: 2025-01-24T21:17:59.000Z (16 days ago)
- Default Branch: main
- Last Pushed: 2025-01-24T21:32:22.000Z (16 days ago)
- Last Synced: 2025-01-24T22:22:49.987Z (16 days ago)
- Topics: offcanvas, offcanvas-menu, picocss, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: https://yohn.github.io/PicoCSS-OffCanvas/
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Offcanvas Component
An 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.
---
## Features
- Configurable sliding directions (`top`, `left`, `bottom`, `right`).
- Content loading from a URL or inline source.
- Push or overlay page content.
- Optional backdrop.
- Configurable scroll behavior for the main page.
- Closeable via backdrop clicks or buttons.
- Easily customizable animations.
- Events for opening, loading content, and closing.
- Support for multiple offcanvas instances.
- Can slide into specific containers instead of the entire body.
---
## Installation
Include the PicoCSS stylesheet and your custom JavaScript and SCSS:
### PicoCSS CDN:
```html
```
### Custom Files:
```html
```
---
## HTML Structure
Each offcanvas requires a trigger button and a corresponding target container:
### Example:
```html
Open Offcanvas
Close
Offcanvas Content
```
---
## Configuration
The component can be configured via:
- **Data Attributes**
- **JavaScript Options**
### Data Attributes
#### `data-offcanvas-target` (required):
Specifies the target offcanvas element to open.
- **Value:** CSS selector of the target element.
#### `data-offcanvas-options` (optional):
JSON string to define offcanvas options.
### JavaScript Options
Options can also be passed programmatically when initializing the `Offcanvas` class.
```javascript
const offcanvas = new Offcanvas(trigger, {
direction: 'left',
push: true,
backdrop: true,
scroll: false,
animation: 'slide-in',
container: 'body',
});
offcanvas.init();
```
---
## Options
The following options are available:
| Option | Type | Default | Description |
|----------------|-----------|-----------|-----------------------------------------------------------------------------|
| `direction` | `string` | `right` | The direction from which the offcanvas appears (`top`, `left`, `bottom`, `right`). |
| `push` | `boolean` | `false` | Whether the offcanvas pushes or overlays the page content. |
| `backdrop` | `boolean` | `true` | Whether to display a backdrop when the offcanvas is open. |
| `scroll` | `boolean` | `false` | Whether the page remains scrollable when the offcanvas is open. |
| `animation` | `string` | `slide-in`| Animation class for showing/hiding the offcanvas. |
| `container` | `string` | `body` | Selector for the container element into which the offcanvas slides. |
---
## Methods
The `Offcanvas` class provides the following methods:
### `init()`
Initializes the offcanvas component by adding event listeners.
### `open()`
Opens the offcanvas.
### `close()`
Closes the offcanvas.
### Example:
```javascript
const trigger = document.querySelector('.offcanvas-trigger');
const offcanvas = new Offcanvas(trigger, { direction: 'top' });
offcanvas.init();
offcanvas.open();
offcanvas.close();
```
---
## Events
The component triggers the following custom events:
| Event | Description |
|--------------------|-----------------------------------------------------------|
| `offcanvas:open` | Triggered when the offcanvas is opened. |
| `offcanvas:close` | Triggered when the offcanvas is closed. |
| `offcanvas:loaded` | Triggered when the offcanvas content is loaded via a URL. |
### Example:
```javascript
const offcanvas = new Offcanvas(trigger);
offcanvas.init();
offcanvas.target.addEventListener('offcanvas:open', () => {
console.log('Offcanvas opened');
});
offcanvas.target.addEventListener('offcanvas:close', () => {
console.log('Offcanvas closed');
});
```
---
## Styling
Default dimensions for the offcanvas can be customized via SCSS variables.
### Default Dimensions:
```scss
.offcanvas {
width: 20rem; // For left and right directions
height: 20rem; // For top and bottom directions
}
```
To customize animations or dimensions, override the SCSS variables or write additional styles.
---
## Examples
### Multiple Offcanvas Buttons:
```html
Open Left
Open Right
Open Top
Open Bottom
Close
Close
Close
Close
```
---
## License
This offcanvas component is provided under the [MIT License](LICENSE).