Adding Off-Canvas Slidebars - Slidebars Usage

Off-canvas Slidebars require the off-canvas attribute with an id, side and style declared as a space separated value. Each off-canvas Slidebar should be outside of the main canvas element and a direct child of the <body>.

<div off-canvas="id side style">
</div>

id
A unique identifier for the Slidebar, it must begin with a letter and may container numbers and hyphens.

side
The side of the Slidebar: left, right, top or bottom.

style
The animation style of the Slidebar: reveal, push, overlay or shift.

The following markup creates four Slidebars, one on each side.

<div off-canvas="id-1 left reveal">
</div>

<div off-canvas="id-2 right push">
</div>

<div off-canvas="id-3 top overlay">
</div>

<div off-canvas="id-4 bottom shift">
</div>

Basic Document

After adding four off-canvas Slidebars, our basic document now looks like:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="path/to/slidebars.css">
  </head>

  <body>
    <div canvas="container">
    </div>

    <div off-canvas="id-1 left reveal">
    </div>

    <div off-canvas="id-2 right push">
    </div>

    <div off-canvas="id-3 top overlay">
    </div>

    <div off-canvas="id-4 bottom shift">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="path/to/slidebars.js"></script>
  </body>
</html>

Next: Initializing Slidebars »

Slidebars
Adchsm

Hi, I'm Adam.

I'm a freelance website designer and front-end developer in BCN.

Left and Right

Top and Bottom

Multiple Same Side

Animation Styles

Mobile Only

Custom Widths and Heights

Custom Transition Durations

Callbacks

Events