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 | 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. |
<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> Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat. Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
<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> Lorem ipsum dolor sit amet, consectetur Proclivi currit oratio. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.
Satisne ergo pudori consulat, si quis sine teste libidini pareat? Bonum integritas misera debilitas. Certe non potest.
Si stante, videlicet vult, salvam esse se, quod concedimus; Duo Reges: constructio interrete.
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri