Home > CSS3 & CSS > Basic Sidebar Navigation With Pure CSS
Basic Sidebar Navigation With Pure CSS

Basic Sidebar Navigation With Pure CSS

Pure css solution for off-canvas and navigation using plain HTML and CSS transitions and transforms.
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.
Example

@include devsloveit-off-canvas(red, $max-width: 320px);
@include devsloveit-off-canvas-helper(blue);
@include devsloveit-off-canvas-wrapper();

  Website Demo

About admin