https://github.com/firstandthird/offcanvas
Javascript library for off canvas (mobile style) menus
https://github.com/firstandthird/offcanvas
Last synced: 7 months ago
JSON representation
Javascript library for off canvas (mobile style) menus
- Host: GitHub
- URL: https://github.com/firstandthird/offcanvas
- Owner: firstandthird
- License: mit
- Created: 2017-01-19T17:42:28.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-12T09:17:35.000Z (almost 3 years ago)
- Last Synced: 2025-03-04T09:40:26.795Z (about 1 year ago)
- Language: HTML
- Size: 1.85 MB
- Stars: 2
- Watchers: 8
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
offcanvas
Javascript library for off canvas (mobile style) menus.
## Installation
```sh
npm install offcanvas
```
_or_
```sh
yarn add offcanvas
```
## Usage
Use the [CSS](example/offcanvas.css) that's shown on the example and customise to your needs. Keep `width` and `translate` similar.
### HTML
```html
this is the left nav
Show left nav
Diam nascetur a natoque gravida odio scelerisque vitae ante ligula est cum convallis ullamcorper suspendisse magnis rutrum dignissim. Lorem a amet faucibus suscipit suspendisse ultrices adipiscing vestibulum morbi nibh habitasse gravida orci condimentum magnis eleifend condimentum leo a quisque condimentum phasellus eros accumsan. Vestibulum ut vestibulum a tempor adipiscing nec fringilla semper purus nisl rhoncus a bibendum a at condimentum. Gravida facilisi cras vivamus et class habitant lacinia ridiculus laoreet parturient sapien pulvinar dui parturient sociis dis augue litora himenaeos ante. Ante nunc a augue nam ullamcorper nulla tortor et rhoncus non scelerisque adipiscing himenaeos a ullamcorper parturient vivamus donec vestibulum vel potenti ultrices diam leo ac a dignissim. A pharetra sagittis vestibulum a condimentum aliquam tristique tincidunt ad lacinia a quisque non a ante.
```
If you are using a fixed element to stick a navigation to the top, you can add the attribute `data-offcanvas-fixed` so once the offcanvas is shown it doesn't go to the top due to transform causing fixed elements to be absolute. See the [example](example/index.html) for more information.
### CSS
```css
@import 'offcanvas/offcanvas.css';
```
### JavaScript
```js
import 'offcanvas';
```
---
_A [First + Third](https://firstandthird.com) Project_