Off-canvas

Off canvas is hidden panel that can be used for displaying hidden blocks or menus. It can be used anywhere on your Joomla pages including modules and extensions.

options:

Options Description
class="yjsg-offc-btn" *Required option. Canvas trigger class name.
data-yjsg-canvas *Required option. Container that holds the canvas.
data-width *Required option. Canvas container width.
data-position Opening canvas position. Not required for default setup. Default is left.

example:

Custom list

Canvas 1

  • List item
  • List item
  • List item

markup:

<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block1" data-width="280">
    Custom list
</a>
<div id="block1" class="yjsg-off_canvas">
    <div class="yjsg-off_canvas_in">
        <h3>Canvas 1</h3>
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>
</div>

example:

Canvas 2 right Canvas 2 left

Canvas 2

Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.

markup:

<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block2" data-position="right" data-width="380">
    Canvas 2 right
</a>
<a href="#" class="yjsg-offc-btn button" data-yjsg-canvas="#block2" data-width="380">
    Canvas 2 left
</a>
<div id="block2" class="yjsg-off_canvas">
    <div class="yjsg-off_canvas_in">
        <h3>Canvas 2</h3>
        <p>
            Content...
        </p>
    </div>
</div>