Offcanvas

Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times

Usage #

Set up the toggle button with data-kube="offcanvas" and data-target. Add an element that will slide or push from outside the page when you click this button. Using the modifiers for the offcanvas box, you can specify the direction of opening the element and the appearance: push or slide.

     
// push from the left
<button data-kube="offcanvas" data-target="#box">Toggle</button>
<div id="box" class="is-offcanvas-push is-hidden">...</div>

// push from the right
<button data-kube="offcanvas" data-target="#box">Toggle</button>
<div id="box" class="is-offcanvas-push is-offcanvas-right is-hidden">...</div>

// slide from the left
<button data-kube="offcanvas" data-target="#box">Toggle</button>
<div id="box" class="is-hidden">...</div>

// slide from the left
<button data-kube="offcanvas" data-target="#box">Toggle</button>
<div id="box" class="is-offcanvas-right is-hidden">...</div>

Modifiers

Class Description
.is-offcanvas-push Set the class to the target to push the page when the offcanvas box will be opened.
.is-offcanvas-right Set this class to the target to push or slide the offcanvas box from the right.
// will be pushed form the left
<div id="box" class="is-offcanvas-push is-hidden">...</div>

// will be slid form the right
<div id="box" class="is-offcanvas-right is-hidden">...</div>

// will be pushed form the right
<div id="box" class="is-offcanvas-push is-offcanvas-right is-hidden">...</div>

Settings #

target

Type: String

Default: false

Sets ID selector of an element that will slide or push from the side.

<button data-kube="offcanvas" data-target="#box">Toggle</button>

<div id="box" class="is-hidden">...</div>

clickOutside

Type: Boolean

Default: true

Unless set to false, clicking anywhere on a page will make side menu to close.

<button data-kube="offcanvas"
        data-click-outside="false"
        data-target="#box">Toggle</button>

<div id="box" class="is-hidden">...</div>

Events #

Event Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the offcanvas box has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the offcanvas box has been closed, will wait for CSS animation to complete.

Catch events in your module:

(function($K)
{
    $K.add('module', 'my-module', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            offcanvas: {
                closed: function(sender)
                {
                    console.log('Offcanvas box is closed.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific offcanvas

Set an ID for the offcanvas:

<button id="myoffcanvas" data-kube="offcanvas" data-target="#box">Toggle</button>

<div id="box" class="is-hidden">...</div>

Or set data-name attribute:

<button data-name="myoffcanvas" data-kube="offcanvas" data-target="#box">Toggle</button>

<div id="box" class="is-hidden">...</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'my-module', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            offcanvas: {
                closed: function(sender)
                {
                    if (sender._id === 'myoffcanvas')
                    {
                        console.log('Offcanvas #myoffcanvas is closed.');
                    }
                }
            }
        }
    });
})(Kube);