Pure css solution for off-canvas
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist/styles
src/styles
.gitignore
Gruntfile.js
README.md
index.html
package.json

README.md

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);
}