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>