- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Off-canvas JavaScript Reference
Foundation provides JavaScript components for the Off-canvas as listed below.
Initializing
You can initialize the pane in the JavaScript by using the foundation.offcanvas.js and foundation.core.js plugins. The foundation.core.js plugin requires the following libraries −
foundation.util.triggers.js
foundation.util.motion.js
Foundation.OffCanvas
It specifies instance of the off-canvas wrapper as defined below −
var my_element = new Foundation.OffCanvas(element);
The Off-canvas includes the following events as listed in the table −
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
element It initializes the jQuery object. |
Object |
| 2 |
options It overrides the default plugin settings. |
Object |
Plugin Options
You can use the following plugin options to customize the off-canvas instance.
| Sr.No. | Name & Description | Example |
|---|---|---|
| 1 |
closeOnClick It closes the menu when the user clicks outside of the menu. |
true |
| 2 |
transitionTime It specifies the time taken to open and close transition in ms. |
500 |
| 3 |
position It defines the direction from where the off-canvas should open. |
left |
| 4 |
forceTop It forces the page to scroll to the top as soon as it is opened. |
|
| 5 |
isRevealed It will open the off-canvas until it reaches the remaining breakpoints. |
false |
| 6 |
revealOn It defines the breakpoint at which to reveal the Off-canvas. |
reveal-for-large |
| 7 |
autoFocus It focuses on off-canvas when it will get open. |
true |
| 8 |
revealClass This class is used to force an off-canvas to remain open. |
reveal-for-large |
Events
Off-canvas provides the following events as listed in the table −
| Sr.No. | Name & Description |
|---|---|
| 1 |
opened.zf.off-canvas It triggers the event when it opens the off-canvas menu. |
| 2 |
closed.zf.off-canvas It triggers the event when it opens the off-canvas menu. |
Functions
Off-canvas provides the following functions as defined below −
.reveal
It will open the off-canvas until it reaches the remaining breakpoints. It has the following function as specified in the table −
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
isRevealed It reveals the element if this function set to true. |
Boolean |
.open
It will open the off-canvas menu. It has following functions as specified in the table −
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
event It passes the event object from listener. |
Object |
| 2 |
trigger It triggers an element to open the off-canvas. |
jQuery |
.close
It closes the off-canvas menu.
.toggle
It toggles the off-canvas menu. It has the following functions as specified in the table −
| Sr.No. | Name & Description | Type |
|---|---|---|
| 1 |
event It passes the event object from listener. |
Object |
| 2 |
trigger It triggers an element to open the off-canvas. |
jQuery |
.destroy
It destroys the off-canvas plugin.