Frontfire documentation

OffCanvas plugin

Version 2.1.0

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.

This plugin is available in the Minimal and Complete bundles.

Description

The off-canvas content can be freely defined in an HTML element with the off-canvas CSS class which applies basic side panel styles and makes the element invisible at first.

To open an off-canvas element, call the offCanvas() plugin function on the element to show as off-canvas. The function takes the options as its single object argument. The options are optional and can alternatively be specified as data-opt HTML attributes with the off-canvas HTML element.

Example

Note, the example uses a <div> HTML element for the off-canvas. Usually, <aside> is a good semantic choice for this kind of element, but the documentation styles interfere with this so it cannot be demonstrated here.

Also, the fixed-position contents panel on the left (only visible on larger screens) cannot be moved to the side (just as the fixed-position header). In this situation, the push animation is not recommended and the overlap (pushFactor = 0) should be used.

Options

The following options are available:

Name Type Description Default
cancelable Boolean Indicates whether the user can close the off-canvas panel by clicking anywhere outside of it or pressing the Escape key. true
closeOnResize Boolean Close the panel when the window size has changed. true
dimBackground Boolean Indicates whether the page background is dimmed while the panel is open. true
edge String The side from which the off-canvas opens (left, right). "left"
noClose String The selector for elements that don’t close the off-canvas panel when touched. None
pushFactor Number Push the page content to the side by this factor when showing the off-canvas panel.
0 doesn’t push, 0.5 pushes half-way, 1 pushes the full panel width.		 1
transitionTime Number The push/slide transition time in milliseconds. 400

Plugin properties

This plugin provides properties to access the off-canvas state.

isOpen

Determines whether the off-canvas is currently open or opening but not closing. This property cannot be written.

if (F("#off-canvas").offCanvas.isOpen) { // ... }

Plugin methods

This plugin provides methods to control the off-canvas.

close

Closes the selected off-canvas.

F("#off-canvas").offCanvas.close();

Plugin events

This plugin triggers events for the off-canvas.

closing

Triggered when the off-canvas is beginning to close.

close

Triggered when the off-canvas is completely closed.

opening

Triggered when the off-canvas is beginning to open.

open

Triggered when the off-canvas is completely open.