Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jenstornell/tinydrawer.js
Really small mobile menu navigation sliding in from the left
https://github.com/jenstornell/tinydrawer.js
drawer javascript js menu mobile nav navigation navigation-drawer no-dependencies tiny vanilla vanilla-javascript vanilla-js zero-dependency
Last synced: about 11 hours ago
JSON representation
Really small mobile menu navigation sliding in from the left
- Host: GitHub
- URL: https://github.com/jenstornell/tinydrawer.js
- Owner: jenstornell
- License: mit
- Created: 2018-11-13T10:04:05.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-22T15:00:10.000Z (over 5 years ago)
- Last Synced: 2024-01-14T08:12:16.293Z (about 1 year ago)
- Topics: drawer, javascript, js, menu, mobile, nav, navigation, navigation-drawer, no-dependencies, tiny, vanilla, vanilla-javascript, vanilla-js, zero-dependency
- Language: JavaScript
- Homepage:
- Size: 69.3 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
# Tiny Drawer
*Version 2.2* - [Changelog](changelog.md)
Really small mobile menu navigation sliding in from the left.
## In short
- Only 1kb
- Vanilla JS
- Zero dependencies
- Super simple setup
- Callback support
- No content wrapper needed
- Remember scroll position on close
*The real thing is much smoother than this animated gif*
## Usage
It just can't get any simpler than this. There is also an example in `index.html`.
### CSS
```html
```
### HTML
```html
Put your menu here
Trigger to open menu
```
### JS
```html
tinyDrawer();
```
## Options
### replacement
To prevent possible collision with other scrips you change `drawer` in data attributes to something else.
```js
tinyDrawer({
replacement: 'drawer'
});
```
*Be aware! If you change this option, you also need to match it in the css file.*
### drawer-selector
```js
tinyDrawer({
drawerSelector: 'drawer-menu'
});
```
*Be aware! If you change this option, you also need to match it in the css file.*
### callback
If you need to trigger other actions when the menu state changes, you can use a callback.
- `element` is the element that triggered the change.
- `action` is `open` or `close` depending on what happends.
```js
tinyDrawer({
callback: function(element, action) {
console.log(element);
console.log(action);
}
});
```
## HTML methods
## Open
```html
Trigger to open menu
```
## Close
```html
Trigger to open menu
```
## JS methods
### open
If you need to programmically trigger the menu to open you can use this method.
```js
tinyDrawerOpen();
```
### close
If you need to programmically trigger the menu to close you can use this method.
```js
tinyDrawerClose();
```
## Other information
### How to style it
Use classes instead of styling the element or attributes directly. That way you will separate your style from the core style.
### The reason for data attributes
For `open` and `close` triggers, data attributes are used. That way logic is not mixed with your styling (which should be put into classes).
### The reason for custom elements
The `drawer-menu` is used like a component. To make it stand out from all the other elements, it's using a custom element.
All major browsers has support for custom elements.
## Donate
Donate to [DevoneraAB](https://www.paypal.me/DevoneraAB) if you want.
## License
MIT