https://github.com/kenangundogan/javascript-offcanvas

Javascript offcanvas - tiny and simple.
https://github.com/kenangundogan/javascript-offcanvas

javascript javascript-offcanvas offcanvas offcanvas-menu

Last synced: about 2 months ago
JSON representation

Javascript offcanvas - tiny and simple.

• Host: GitHub
• URL: https://github.com/kenangundogan/javascript-offcanvas
• Owner: kenangundogan
• License: mit
• Created: 2021-04-10T19:11:41.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-12T06:02:27.000Z (about 4 years ago)
• Last Synced: 2025-01-19T16:10:51.650Z (3 months ago)
• Topics: javascript, javascript-offcanvas, offcanvas, offcanvas-menu
• Language: SCSS
• Homepage:
• Size: 124 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Javascript Offcanvas

Javascript offcanvas - tiny and simple.

## Status

[![JS gzip size](https://img.badgesize.io/kenangundogan/javascript-offcanvas/main/dist/script/script.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/kenangundogan/javascript-offcanvas/blob/main/dist/script/script.js)

[![JS Brotli size](https://img.badgesize.io/kenangundogan/javascript-offcanvas/main/dist/script/script.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/kenangundogan/javascript-offcanvas/blob/main/dist/script/script.js)

[![CSS gzip size](https://img.badgesize.io/kenangundogan/javascript-offcanvas/main/dist/style/style.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/kenangundogan/javascript-offcanvas/blob/main/dist/style/style.css)

[![CSS Brotli size](https://img.badgesize.io/kenangundogan/javascript-offcanvas/main/dist/style/style.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/kenangundogan/javascript-offcanvas/blob/main/dist/style/style.css)

![Javascript Offcanvas](https://raw.githubusercontent.com/kenangundogan/javascript-offcanvas/main/asset/javascript-offcanvas-cover.png)

## Options

Option | Type | Default | Description | Example

------ | ---- | ------- | ----------- | -----------

id | string |  | id DOM element | [Example](https://kenangundogan.github.io/javascript-offcanvas)

data-position | string | left | special class can be added | [Example](https://kenangundogan.github.io/javascript-offcanvas)

data-size | string | small | special class can be added | [Example](https://kenangundogan.github.io/javascript-offcanvas)

data-transition | int | 300ms | opening and closing animation speed | [Example](https://kenangundogan.github.io/javascript-offcanvas)

## Usage example

### Script

```javascript

var offcanvas = new Offcanvas;

```

### View

```html

Default



    


        

        ...

    



```


## Copyright and license

Designed and built by [Kenan Gündoğan](https://www.linkedin.com/in/kenangundogan/)




2021 Currently - Code released under the [MIT License](https://github.com/kenangundogan/javascript-offcanvas/blob/master/LICENSE)

Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/)