jQuery onoffcanvas Plugin DEMOS

Page Canvas

position: fixed

<div class="canvas is-fixed is-top" id="cft">
  <h1>Top Canvas</h1>
  <button class="btn btn-danger" name="button" data-toggle="canvas" data-target="#cft">CLOSE</button>
</div>
            
<div class="canvas is-fixed is-right" id="cfr">
  <h1>Right Canvas</h1>
  <button class="btn btn-danger" name="button" data-toggle="canvas" data-target="#cfr">CLOSE</button>
</div>
            
<div class="canvas is-fixed is-bottom" id="cfb">
  <h1>Bottom Canvas</h1>
  <button class="btn btn-danger" name="button" data-toggle="canvas" data-target="#cfb">CLOSE</button>
</div>
            
<div class="canvas is-fixed is-left" id="cfl">
  <h1>Left Canvas</h1>
  <button class="btn btn-danger" name="button" data-toggle="canvas" data-target="#cfl">CLOSE</button>
</div>
            
<div class="canvas is-fixed" id="cff">
  <h1>Full Canvas</h1>
  <button class="btn btn-danger" name="button" data-toggle="canvas" data-target="#cff">CLOSE</button>
</div>
            

Card Canvas

position: absolute

Top Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Right Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Bottom Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Left Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Center Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Full Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Hoverable Canvas

position: absolute

Hoverable Canvas

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
lorem ipsum ...

Full Canvas

Close
Close

Top Canvas

Right Canvas

Bottom Canvas

Left Canvas

Full Canvas