Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dotsunited/off-canvas-navigation
Off-Canvas Navigation utilities.
https://github.com/dotsunited/off-canvas-navigation
Last synced: about 21 hours ago
JSON representation
Off-Canvas Navigation utilities.
- Host: GitHub
- URL: https://github.com/dotsunited/off-canvas-navigation
- Owner: dotsunited
- License: mit
- Created: 2015-07-01T15:04:04.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-28T07:09:04.000Z (over 8 years ago)
- Last Synced: 2024-10-04T06:39:35.408Z (about 1 month ago)
- Language: JavaScript
- Size: 135 KB
- Stars: 4
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Off-Canvas Navigation
=====================
Off-Canvas Navigation utilities.
Usage
-----
With webpack:
```javascript
var setup = require('dotsunited-off-canvas-navigation/lib/setup');
setup('off-canvas-navigation');
```
```less
@import "~dotsunited-off-canvas-navigation/lib/mixins";
.off-canvas-navigation-button {
.dotsunited-off-canvas-navigation-button(off-canvas-navigation);
// Custom styles
position: absolute;
top: 10px;
right: 10px;
}
.off-canvas-navigation-menu {
.dotsunited-off-canvas-navigation-menu(off-canvas-navigation);
}
.off-canvas-navigation-backdrop {
.dotsunited-off-canvas-navigation-backdrop(off-canvas-navigation);
}
```
HTML
-----
```html
- ...
```
How-tos
-------
### Change the size of the button
To change the size of the button, just set a different width and height for the
first nested ``.
```css
@import "~dotsunited-off-canvas-navigation/lib/mixins";
.off-canvas-navigation-button {
.dotsunited-off-canvas-navigation-button(off-canvas-navigation);
> span {
width: 100px;
height: 90px;
}
}
```
License
-------
Copyright (c) 2015-2016 Dots United GmbH.
Released under the [MIT](LICENSE?raw=1) license.