Offcanvas

Version 3.0
GitHub Repository

Offcanvas is an easy-to-use, touch-enabled jQuery and SCSS off-canvas sidebar plugin with multiple options for configuration. It should be compatible with any CSS framework. The animations are all performed by CSS3.

Features

Setup

1 The HTML can be as simple as in the following example. 

<!doctype html>
<html>
  <head>
    ...
    <link href="path/to/offcanvas.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>

    <div id="offcanvas-sidebar"> ... </div>

    <div id="page-wrap"> ... </div>

    <script src="path/to/jquery.js"></script>
    <script src="path/to/offcanvas.js"></script>
  </body>
</html>

If you choose Offcanvas over options (see below), then the block id="page-wrap" is not necessary – it is only used for Offcanvas push or under, for enabling the page content to slide left or right.

The HTML order of id="offcanvas-sidebar" and id="page-wrap" is up to you – you choose, according to your own considerations (e.g. accessibility, and what your Offcanvas acrually contains).

2 Then, all you need to do is add your list of links – and some headings if required. 

<div id="offcanvas-sidebar">
  <h4>Menu 1</h4>          ⬅ OPTIONAL
    <ul>
    <li><a href="">Link 1.1</a>
      <ul>
        <li><a href="">Link 1.1.1</a></li>
        <li><a href="">Link 1.1.2</a></li>
        <li><a href="">Link 1.1.3</a></li>
        <li><a href="">Link 1.1.4</a></li>
      </ul>
    </li>
    <li><a href="">Link 1.2</a></li>
    <li><a href="">Link 1.3</a></li>
    <li><a href="">Link 1.4</a></li>
  </ul>
</div>

Your headings can also be links, if you need them to be. In that case, you can think of your Offcanvas as having three levels of menu links (parent, child and grandchild.)

Behaviour

1 Navicon

The Offcanvas JS injects a Transformicon-style animated "hamburger" navicon and any Offcanvas Menus and back-links as required.

2 Fixed position

The navicon is CSS position:fixed to the top-right or top-left corner of the window, depending on whether you configure a left or right Offcanvas.

Offcanvas is set to be always available by CSS position:fixed wherever your visitor activates it, from any scroll position on the webpage. And it resets to its starting scroll/ first-level menu state whenever a visitor dismisses it.

3 2nd level menu

Offcanvas can display 2nd level menus (sub-menus). All you need to do is place an unordered list within the parent <li> and Offcanvas will handle everything.

The Offcanvas JS will insert a <span> containing » into the parent list item – visitors clicking this will see the Offvanvas sidebar slide to the left, revealing the child menu. And above the child menu the script will insert a <span> containing « Back – visitors clicking this will see the Offcanvas slide to the right, revealing the parent menu again.

4 Tap or click

The Offcanvas JS will respond either to taps (using touchstart()) or clicks (using click()) depending on whichever pointing device your visitor uses.

5 Dismissable three ways

When Offcanvas is opened (activated), it can be dismissed by eny of these three methods:

  1. By click/tapping the navicon again
  2. By click/tapping anywhere outside Offcanvas i.e. anywhere on your content. (Since Offcanvas version 3, this is accomplished entirely by the JS script – not by click/tapping an overlay, as in earlier versions of Offcanvas.)
  3. Changing the window-width (e.g. rotating a phone or tablet between portrait and landscape orientation) will also dismiss Offcanvas.

Six sidebar options

In the GitHub repository, offvanvas.css is demonstrating Offvanvass in "offcanvas-push-right" mode. But if you can configure the SCSS, then Offcanvas can have any one of six options.

Simply include one of mixins from scss/import/_options.scss in your body style rule, as in the following example.

body {
  @include offcanvas-push-right;
}

1 @include offcanvas-over-left – the off-canvas sidebar slides in from the left on a layer over the webpage content.

2 @include offcanvas-over-right – the off-canvas sidebar slides in from the right on a layer over the webpage content.

3 @include offcanvas-under-left – the webpage content* slides right revealing the off-canvas sidebar to the left.

4 @include offcanvas-under-right – the webpage content* slides left revealing the off-canvas sidebar to the right.

5 @include offcanvas-push-left – the off-canvas sidebar slides in from the left, and the webpage content* slides right to accommodate it.

6 @include offcanvas-push-right – the off-canvas sidebar slides in from the right, and the webpage content* slides left to accommodate it.

*For these four options, your webpage content must be wrapped as follows: 

<div id="page-wrap">

  <!-- Your webpage content -->

</div>

All these movements are performed by CSS3 transforms.

Responsive or not – you choose

No media queries have been set for Offcanvas. This is deliberate. It is up to you to set media queries as you choose (or not). You may choose to have Offcanvas to display and operate only for phones, or for tablets and phones, or for any size screen.

Simply set the Offcanvas components to display: none for the screen screen sizes where you don't require it, as in the following example.

@media (min-width: 768px) {
  #offcanvas-navicon,
  #offcanvas-overlay,
  #offcanvas-sidebar {
    display: none
  }
}

Menu 1

Menu 2

Menu 3

Menu 4

Menu 5

Menu 6

Menu 7

Menu 8

Menu 9

Menu 10