Off canvas offcanvas.js

Example

The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.

Usage

Add .offcanvas to hide an element. Alternatively add .offcanvas-* to hide an element up to a specific viewport width. Adding the .offcanvas class is not required. You may also hide an element by any other means.

The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.

When shown, the plugin adds .canvas-slid to the element that has slid.

Via data attributes

Add data-toggle="offcanvas" and a data-target to control, assigning it to show and hide the target element. The data-target attribute accepts a CSS selector to apply the collapse to.

Optionally add a data-canvas attribute to slide a canvas instead of only the target element. For a push menu set data-canvas="body".

Via JavaScript

Call the input mask via javascript:

$('.navmenu').offcanvas()

Options

Name type default description
canvas string false If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.
toggle boolean true Toggles the off canvas element on invocation
placement string 'auto' Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.
autohide boolean true Hide the off canvas element if clicked anywhere other that the element.
recalc boolean true Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.
disableScrolling boolean true Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.

Graceful degradation

For browsers that don't support transform (mainly IE8), the target option is ignored. In that case, the plugin will always slide the target element. In that case .canvas-slid will be added to the target element instead.

Methods

.offcanvas(options)

Initializes the off canvas element with an optional options.

.offcanvas('toggle')

Toggles an off canvas element to shown or hidden.

.offcanvas('show')

Shows an off canvas element.

.offcanvas('hide')

Hides an off canvas element.

Events

Event Type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide instance method has been called.
hidden.bs.offcanvas This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).