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>