devsloveit-css.off-canvas
v1.2.2
Published
devslove.it - Pure CSS off-canvas menu
Downloads
34
Readme
css.off-canvas by devslove.it
Installation
We recommend using a package manager to install this widget as a dependency of your project. Please read the docs of the respective package manager if you don't know how to use it.
- npm:
npm install devsloveit-css.off-canvas
You can add --save
as a parameter if you want to add the plugin into your package.json
.
Usage
HTML
Have a look at codepen.
data-comes-from
We are using a data-attribute (e.g. data-comes-from="right"
) for defining the direction.
JavaScript
We don't need JavaScript ;-)
SCSS
Mixins
@include devsloveit-off-canvas();
Creates your content container (which holds your content).
You can't use $helper-background-color
option here.
@include devsloveit-off-canvas-helper();
Creates your helper for removing off-canvas.
You can only use $helper-background-color
and transition options here.
@include devsloveit-off-canvas-wrapper();
Creates your wrapper (which holds all elements). You can only use transition options here.
@include devsloveit-off-canvas-styles();
Combines all mixins (only include once - then use single mixins).
Options
| Option | Default | Description | |---|---|---| | $background-color | false | Defines the background-color of your container. | | $helper-background-color | false | Defines the background-color of your closing-helper. | | $max-height | false | Should be defined for top or bottom uses. | | $max-width | false | Should be defined for left or right uses. | | $transition-time | $devsloveit-off-canvas-transition-time | Is defined in main settings. Can be overwritten by setting a new value to the variable. | | $transition-type | $devsloveit-off-canvas-transition-type | Is defined in main settings. Can be overwritten by setting a new value to the variable. |
Example
@include devsloveit-off-canvas(red, $max-width: 320px);
@include devsloveit-off-canvas-helper(blue);
@include devsloveit-off-canvas-wrapper();
For additional cases
.example {
@include devsloveit-off-canvas($max-width: 500px);
@include devsloveit-off-canvas-helper(green);
}