LogoFrontfire Demo

Off-canvas

An off-canvas element appears on request on either side of the page and overlays or pushes away the main page content. This can be used for navigation menus or other side panels that don’t need to be permanently visible.

To open an off-canvas element, call the offCanvas jQuery extension function on the element to show as off-canvas. The function takes the options as its single argument. The options are optional and can alternatively be specified as data-opt HTML attributes with the off-canvas HTML element. The following options are supported:

Option Type Description Default
cancellable Boolean Indicates whether the user can close the off-canvas panel by clicking anywhere outside of it or pressing Esc. true
edge String The side from which the off-canvas opens. Values: left, right left
push Number Push the page content to the side when showing the off-canvas panel. 0 doesn’t push, 0.5 pushes half-way, 1 pushes the full panel width. 1

To open an off-canvas, use code like this:

$("#button1").click(function (event) {
    $("#offCanvas1").offCanvas(options);
});

Here are a number of buttons that open the same off-canvas with different options.

The off-canvas can be closed by code. This is done through a plugin extension function with a syntax similar to other jQuery functions.

$("#offCanvas1").offCanvas.close();

This space is intentionally left blank to demonstrate the page scroll lock while an off-canvas element is open.